JSFiddle - React, Tailwind, and code Playground

by elodie GABORIT

HTML

<script src="http://cdn.jsdelivr.net/bxslider/4.1.1/plugins/jquery.easing.1.3.js"></script>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/bxslider/4.1.1/jquery.bxslider.css">
<script src="http://cdn.jsdelivr.net/bxslider/4.1.1/jquery.bxslider.js"></script>
    <!-- The main images -->
    <ul id="bxslider">
<li><img src="http://dummyimage.com/600x400/000/fff.png" alt=""><div class="content">
					<h3>MGMT</h3>
					<h4>Congratulations</h4>
					<p>Recording the follow-up to your critically-acclaimed debut album has to be a nerve-wracking affair. As a band, do you go with the same sound/formula you used on the first record? On MGMT’s sophomore album Congratulations, they successfully manage to do both.</p>
				</div>
				<div class="clear"></div></li>
<li><img src="http://dummyimage.com/600x400/000/ff0099.png" alt=""></li>
<li><img src="http://dummyimage.com/600x400/000/ff0000.png" alt=""></li>
<li><img src="http://dummyimage.com/600x400/000/fff000.png" alt=""></li>
<li><img src="http://dummyimage.com/600x400/000/fff.png" alt=""></li>
<li><img src="http://dummyimage.com/600x400/000/fff.png" alt=""></li>
    </ul>

    <!-- The thumbnails -->
    <ul id="bxslider-pager">
<li data-slideIndex="0"><a href=""><img src="http://dummyimage.com/200x200/000/fff.png"></a></li>
<li data-slideIndex="1"><a href=""><img src="http://dummyimage.com/200x200/000/ff0099.png"></a></li>
<li data-slideIndex="2"><a href=""><img src="http://dummyimage.com/200x200/000/ff0000.png"></a></li>
<li data-slideIndex="3"><a href=""><img src="http://dummyimage.com/200x200/000/fff000.png"></a></li>
    <li data-slideIndex="4"><a href=""><img src="http://dummyimage.com/200x200/000/fff.png"></a></li>
    <li data-slideIndex="5"><a href=""><img src="http://dummyimage.com/200x200/000/fff.png"></a></li>
    </ul>

CSS

.clear {
	clear: both;
}
#bxslider {
	overflow: hidden;
  width:100%;
}

#bxslider li {
	list-style: none;
	width: 60%;
}
#bxslider .content {
	float: left;
	width: 30%;
	padding-left: 21px;
}

#bxslider li img {
	float: left;
}

JavaScript

var $j = jQuery.noConflict();

var realSlider= $j("ul#bxslider").bxSlider({
      speed:1000,
      pager:false,
      nextText:'',
      prevText:'',
      infiniteLoop:false,
      hideControlOnEnd:true,
      onSlideBefore:function($slideElement, oldIndex, newIndex){
        changeRealThumb(realThumbSlider,newIndex);
        
      }
      
    });
    
    var realThumbSlider=$j("ul#bxslider-pager").bxSlider({
      minSlides: 4,
      maxSlides: 4,
      slideWidth: 156,
      slideMargin: 12,
      moveSlides: 1,
      pager:false,
      speed:1000,
      infiniteLoop:false,
      hideControlOnEnd:true,
      nextText:'<span></span>',
      prevText:'<span></span>',
      onSlideBefore:function($slideElement, oldIndex, newIndex){
        /*$j("#sliderThumbReal ul .active").removeClass("active");
        $slideElement.addClass("active"); */

      }
    });
    
    linkRealSliders(realSlider,realThumbSlider);
    
    if($j("#bxslider-pager li").length<5){
      $j("#bxslider-pager .bx-next").hide();
    }

// sincronizza sliders realizzazioni
function linkRealSliders(bigS,thumbS){
  
  $j("ul#bxslider-pager").on("click","a",function(event){
    event.preventDefault();
    var newIndex=$j(this).parent().attr("data-slideIndex");
        bigS.goToSlide(newIndex);
  });
}

//slider!=$thumbSlider. slider is the realslider
function changeRealThumb(slider,newIndex){
  
  var $thumbS=$j("#bxslider-pager");
  $thumbS.find('.active').removeClass("active");
  $thumbS.find('li[data-slideIndex="'+newIndex+'"]').addClass("active");
  
  if(slider.getSlideCount()-newIndex>=4)slider.goToSlide(newIndex);
  else slider.goToSlide(slider.getSlideCount()-4);

}