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

FlexSliderはサイト上に効果的なヒーロースライダーを追加できるjQueryプラグイン
<!-- @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>
$(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 }})
<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>