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.

25 November 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat