jQuery

【jQuery】jQueryを使ったスライダープラグインBonoslider

April 27, 2017
Bonoslider

BonosliderはjQueryを使ったスライダープラグイン。

Installation

<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="js/jquery.easing.min.js" type="text/javascript"></script>
<script src="js/bonoslider.min.js" type="text/javascript"></script>
<script src="js/bonoslider.min.css" type="text/javascript"></script> 
<link rel="stylesheet" href="fonts/essential-light-styles.css"> -->

Html markup

<div id="bonoSlider">
    <a class="nav prev" href="#"><div class="icon icon-essential-light-01-chevron-left"></div></a>
    <a class="nav next" href="#"><div class="icon icon-essential-light-02-chevron-right"></div></a>
    <ul>
      <li>
          <div class="slide-item">
               <img id="imgId" src="images/bono-1.jpg" alt="bonoSlider" />
               <div class="slide-content">
                  <div class="slide-content-wrap">
                     <h2>Lorem Ipsum</h2>
                     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <a href="#" class="more">more..</a></p>
                  </div>
               </div>
          </div>  
      </li>
      <li>
          <div class="slide-item">
               <img src="images/bono-2.jpg" alt="bonoSlider" />
               <div class="slide-content">
                   <div class="slide-content-wrap">
                     <h2>Lorem Ipsum</h2>
                     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <a href="#" class="more">more..</a></p>
                  </div>
               </div>
          </div>
      </li>
      <li>
          <div class="slide-item">
               <img src="images/bono-3.jpg" alt="bonoSlider" />
               <div class="slide-content">
                   <div class="slide-content-wrap">
                     <h2>Lorem Ipsum</h2>
                     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <a href="#" class="more">more..</a></p>
                  </div>
               </div>
          </div>
      </li>
      <li>
          <div class="slide-item">
               <img src="images/bono-4.jpg" alt="bonoSlider" />
               <div class="slide-content">
                   <div class="slide-content-wrap">
                     <h2>Lorem Ipsum</h2>
                     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <a href="#" class="more">more..</a></p>
                  </div>
               </div>
          </div>
      </li>
    </ul> 
    <div class="nav-controls">
      <div class="nav-controls-content">
         <a href="#" class="active-control"></a><a href="#"></a><a href="#"></a><a href="#"></a>
      </div>
    </div> 
</div>

Call/fire Bonoslider

<script>
   $("#bonoSlider").bonoSlider({ 
     showControls : true, 
     showNexPreControls : true, 
     showContent : true,
     slideEffect: 'easeInOutBounce'
   });
</script>

Download