mdr141
5/22/2018 - 11:29 AM

HowToUse::bxSlider

https://bxslider.com/ https://bxslider.com/install/ https://bxslider.com/options/

AutoScroll
content_copyfile_download
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width">
    <!-- bxSlider CDN -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
    <script>
      $(document).ready(function(){
        $('.slider').bxSlider({
            // Slides will automatically transition
            auto: true,
            // Type of transition between slides
            mode: 'fade',
            // Slide transition duration (in ms)
            speed: 2000//,
            // The width of each slide. This setting is required for all horizontal carousels!
            // slideWidth: 400
        });
      });
    </script>
  </head>
  <body>
    <!-- bxSlider -->
    <ul class="slider">
      <li><img src="images/pic1.jpg" alt=""></li>
      <li><img src="images/pic2.jpg" alt=""></li>
      <li><img src="images/pic3.jpg" alt=""></li>
      <li><img src="images/pic4.jpg" alt=""></li>
    </ul>    
  </body>
</html>