【jQuery】サイト上に効果的なヒーロースライダーを追加FlexSlider

FlexSliderはサイト上に効果的なヒーロースライダーを追加できるjQueryプラグイン

HTML

<!-- @zone - hightlighted -->
<div id="highlighted" class="slider_background">
<!--Showshow-->
<div class="container slider-container">
<div class="row">
<div class="col-md-9 slider-left">
<section class="flexslider-wrapper">
<div id="main-slider" class="flexslider" data-transition="fade" data-page-class="slider-full-width">
<div class="slides">
<div data-slide-alt="alt" data-slide-bg-stretch=true class="slide slide-bg" data-slide-bg="https://www.solodev.com/assets/flexslider/slide1.jpg">
<div class="slide-caption">
<div class="row">
<div class="col-md-12">
<div class="slide-text">
<div class="slide-title">This is Slide #1</div>
This is text for the first slide.
</div>
</div>
</div>
</div>
</div>
<div data-slide-alt="alt" data-slide-bg-stretch=true class="slide slide-bg" data-slide-bg="https://www.solodev.com/assets/flexslider/slide2.jpg">
<div class="slide-caption">
<div class="row">
<div class="col-md-12">
<div class="slide-text">
<div class="slide-title">This is Slide #2</div>
This is text for the second slide.
</div>
</div>
</div>
</div>
</div>
<div data-slide-alt="alt" data-slide-bg-stretch=true class="slide slide-bg" data-slide-bg="https://www.solodev.com/assets/flexslider/slide3.jpg">
<div class="slide-caption">
<div class="row">
<div class="col-md-12">
<div class="slide-text">
<div class="slide-title">This is Slide #3</div>
This is text for the third slide.
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="col-md-3 slider-right">
<!--Right side buttons-->
<h2>Most Popular</h2>
<ul>
<li><a href="#" class="mdr-button ">About Us</a></li>
<li><a href="#" class="mdr-button ">Clients</a></li>
<li><a href="#" class="mdr-button ">Services</a></li>
<li><a href="#" class="mdr-button ">Resources</a></li>
<li><a href="#" class="mdr-button ">Contact Us</a></li>
</ul>
</div>
</div>
</div>
</div>

JavaScript

$(document).ready(function () {
if (jQuery().flexslider) {
//flexslider ticker
$('.flexslider-ticker').each(function() {
var tickerSettings =  {
animation: "slide",
animationLoop: false,
selector: ".items > .item",
move: 1,
controlNav: false,
slideshow: true,
direction: 'vertical'
};
$(this).flexslider(tickerSettings);
});
// flexsliders
$('.flexslider').each(function() {
var sliderSettings =  {
animation: $(this).attr('data-transition'),
selector: ".slides > .slide",
controlNav: false,
smoothHeight: true,
prevText: "",
nextText: "",
sync: $(this).data('slidernav') || '',
start: function(slider) {
if (slider.find('[data-slide-bg-stretch=true]').length > 0) {
slider.find('[data-slide-bg-stretch=true]').each(function() {
if ($(this).data('slide-bg')) {
$(this).backstretch($(this).data('slide-bg'));
// $(this).data('slide-bg');
}
});
}
}
};
$('html').addClass('has-flexslider');
$(this).flexslider(sliderSettings);
});
$(window).delay(1000).trigger('resize'); //make sure height is right load assets loaded
}})

External Includes

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.2/flexslider.css">
<link rel="stylesheet" href="flex.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.2/jquery.flexslider.js"></script>
 
flexslider

【jQuery】サイト上に効果的なヒーロースライダーを追加FlexSlider

  • LATEST
  • RELATED
  • POPULAR