Membuat Slider Mobile Menggunakan Jquery

Haloo teman-teman Dumet School, pada kesempatan kali ini saya akan Membuat Slider Mobile Menggunakan Jquery. Dimana slider  mobile yang dimaksud disini adalah animasi slider dengan bentuk mobile. Langkah pertama untuk dapat Membuat Slider Mobile Menggunakan Jquery yaitu saya akan membuat struktur html seperti di bawah ini.

 <!DOCTYPE html>
<html lang="en">
<script
  src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<head>
    <meta charset="UTF-8">
    <title>Membuat Slider Mobile Menggunakan Jquery</title>
</head>
<body>
   <div class="dm-width">
  <div class="dm-device">
    <div class="device">
      <div class="screen">
        <div class="slider">
          <div class="slider__item slider__item--1">
          
          </div>
          <div class="slider__item slider__item--2">
        
          </div>
          <div class="slider__item slider__item--3">
   
          </div>
          <div class="slider__item slider__item--4">
     
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Jika sudah maka tahap selanjutnya saya akan membuat style css seperti di bawah ini.

<style>
        body{
             overflow: hidden;
            background-image:url(67.jpeg);
            background-size: cover;
        }
        
          .dm-width {
         width: 500px;
         margin: 0 auto;
      }

      .iphone-mockup {
         position: relative;
         z-index: 5;
      }

      .dm-device {
          position: relative;
          width: 100%;
          padding-bottom:203.477897%;
          margin-bottom: 20px;
      }

      .device {
        position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          width: 100%;
          height: 100%;
          -webkit-background-size: 100% 100%;
          
          background-repeat: no-repeat;
        background-image: url(apple-iphone.png);
        background-size: cover;
          background-position: center center;
      }

      .screen {
         overflow: hidden;
          position: absolute;
          top: 18.1%;
          bottom: 20.6%;
          left: 12.49%;
          right: 17.4%;
          background-color: white;
      }

      .slider {
        height: 100%;
      }
      .slider div {
        height: 100%;
      }

      .slider__item {
          font-size: 100px;
          color: rgba(255,255,255,0.7);
          display: flex;
          justify-content: center;
          align-items: center;
      }

      .slider__item--1 {
         background-image: url(dumet-school.jpg);
          background-position: center ;
          background-repeat: no-repeat;
      }
      .slider__item--2 {
           background-image: url(settings_menu_icon.png);
          background-size: cover;
      }
      .slider__item--3 {
          background-image: url(uko.jpg);
          background-size: cover;
          background-position: center;
      }

      .slider__item--4 {
           background-image: url(pexels-photo-445109.jpeg);
          background-size: cover;
          background-position: center;
      }
          
    </style>

Dan langkah terakhir yaitu saya akan membuat script jquery untuk  menjalankan slider mobile.

<script>
    
    $('.slider').owlCarousel({
            items: 1,
            singleItem:true,
            nav: true,
            dots: false,
            loop: true,
            autoPlay: 3000
        });
    
</script>

Demikian artikel tentang cara  Membuat Slider Mobile Menggunakan Jquery. Semoga dapat bermanfaat dan selamat mencoba.