Membuat Slider keren dengan JQuery

Halo teman teman dumenity dumet schoo. kembali lagi di panduan panduan pemrogramman laman Source Code Aplikasi, kali ini kita akan belajar Merancang Slider Keren dengan JQuery, yuk seketika saja kita praktekan teman teman.





pertama-tama bikin file index. html, mani.js dan style. css



kembali



setelah itu kalian bikin struktur html nya seperti di bawah ini.



<!DOCTYPE html>
<html lang=en>
<head>
  <meta charset=UTF-8>
  <title>Slider Keren</title>
  <link rel=stylesheet href=style.css>
</head>
<body>
  <div class=slider>
  <div class=slide_viewer>
    <div class=slide_group>
      <div class=slide>
      </div>
      <div class=slide>
      </div>
      <div class=slide>
      </div>
      <div class=slide>
      </div>
    </div>
  </div>
</div><!-- End // .slider -->

  <div class=slide_buttons>
  </div>

  <div class=directional_nav>
    <div class=previous_btn title=Merancang Slider keren dengan JQuery>
      <svg version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink x=0px y=0px width=65px height=65px viewBox=-11 -11.5 65 66>
        <g>
          <g>
            <path fill=#474544 d=M-10.5,22.118C-10.5,4.132,4.133-10.5,22.118-10.5S54.736,4.132,54.736,22.118
        c0,17.985-14.633,32.618-32.618,32.618S-10.5,40.103-10.5,22.118z M-8.288,22.118c0,16.766,13.639,30.406,30.406,30.406 c16.765,0,30.405-13.641,30.405-30.406c0-16.766-13.641-30.406-30.405-30.406C5.35-8.288-8.288,5.352-8.288,22.118z/>
            <path fill=#474544 d=M25.43,33.243L14.628,22.429c-0.433-0.432-0.433-1.132,0-1.564L25.43,10.051c0.432-0.432,1.132-0.432,1.563,0 c0.431,0.431,0.431,1.132,0,1.564L16.972,21.647l10.021,10.035c0.432,0.433,0.432,1.134,0,1.564  c-0.215,0.218-0.498,0.323-0.78,0.323C25.929,33.569,25.646,33.464,25.43,33.243z/>
          </g>
        </g>
      </svg>
    </div>
    <div class=next_btn title=Merancang Slider keren dengan JQuery>
      <svg version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink x=0px y=0px width=65px height=65px viewBox=-11 -11.5 65 66>
        <g>
          <g>
            <path fill=#474544 d=M22.118,54.736C4.132,54.736-10.5,40.103-10.5,22.118C-10.5,4.132,4.132-10.5,22.118-10.5  c17.985,0,32.618,14.632,32.618,32.618C54.736,40.103,40.103,54.736,22.118,54.736z M22.118-8.288  c-16.765,0-30.406,13.64-30.406,30.406c0,16.766,13.641,30.406,30.406,30.406c16.768,0,30.406-13.641,30.406-30.406 C52.524,5.352,38.885-8.288,22.118-8.288z/>
            <path fill=#474544 d=M18.022,33.569c 0.282,0-0.566-0.105-0.781-0.323c-0.432-0.431-0.432-1.132,0-1.564l10.022-10.035      L17.241,11.615c 0.431-0.432-0.431-1.133,0-1.564c0.432-0.432,1.132-0.432,1.564,0l10.803,10.814c0.433,0.432,0.433,1.132,0,1.564 L18.805,33.243C18.59,33.464,18.306,33.569,18.022,33.569z/>
          </g>
        </g>
      </svg>
    </div>
  </div><!-- End // .directional_nav -->
 </body>
</html>


setelah itu bikin css nya seperti berikut yah teman teman



html, body {
  background: #F7F5E6;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}

.slider {
  margin: 0 auto;
  max-width: 940px;
}

.slide_viewer {
  height: 340px;
  overflow: hidden;
  position: relative;
}

.slide_group {
  height: 100%;
  position: relative;
  width: 100%;
}

.slide {
  display: none;
  height: 100%;
  position: absolute;
  width: 100%;
}

.slide:first-child {
  display: block;
}

.slide:nth-of-type(1) {
  background: #D7A151;
}

.slide:nth-of-type(2) {
  background: #F4E4CD;
}

.slide:nth-of-type(3) {
  background: #C75534;
}

.slide:nth-of-type(4) {
  background: #D1D1D4;
}

.slide_buttons {
  left: 0;
  position: absolute;
  right: 0;
  text-align: center;
}

a.slide_btn {
  color: #474544;
  font-size: 42px;
  margin: 0 0.175em;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.slide_btn.active, .slide_btn:hover {
  color: #428CC6;
  cursor: pointer;
}

.directional_nav {
  height: 340px;
  margin: 0 auto;
  max-width: 940px;
  position: relative;
  top: -340px;
}

.previous_btn {
  bottom: 0;
  left: 100px;
  margin: auto;
  position: absolute;
  top: 0;
}

.next_btn {
  bottom: 0;
  margin: auto;
  position: absolute;
  right: 100px;
  top: 0;
}

.previous_btn, .next_btn {
  cursor: pointer;
  height: 65px;
  opacity: 0.5;
  -webkit-transition: opacity 0.4s ease-in-out;
  -moz-transition: opacity 0.4s ease-in-out;
  -ms-transition: opacity 0.4s ease-in-out;
  -o-transition: opacity 0.4s ease-in-out;
  transition: opacity 0.4s ease-in-out;
  width: 65px;
}

.previous_btn:hover, .next_btn:hover {
  opacity: 1;
}

@media only screen and (max-width: 767px) {
  .previous_btn {
    left: 50px;
  }
  .next_btn {
    right: 50px;
  }
}


dan terakhir kalian mesti sambungkan file kalian dengan JQUery dan main. js nya yah teman teman



kembali



setelah itu di main. js ketikan script berikut yah teman teman.



$('.slider').each(function() {
  var $this = $(this);
  var $group = $this.find('.slide_group');
  var $slides = $this.find('.slide');
  var bulletArray = [];
  var currentIndex = 0;
  var timeout;
  
  function move(newIndex) {
    var animateLeft, slideLeft;
    
    advance();
    
    if ($group.is(':animated') || currentIndex === newIndex) {
      return;
    }
    
    bulletArray[currentIndex].removeClass('active');
    bulletArray[newIndex].addClass('active');
    
    if (newIndex > currentIndex) {
      slideLeft = '100%';
      animateLeft = '-100%';
    } else {
      slideLeft = '-100%';
      animateLeft = '100%';
    }
    
    $slides.eq(newIndex).css({
      display: 'block',
      left: slideLeft
    });
    $group.animate({
      left: animateLeft
    }, function() {
      $slides.eq(currentIndex).css({
        display: 'none'
      });
      $slides.eq(newIndex).css({
        left: 0
      });
      $group.css({
        left: 0
      });
      currentIndex = newIndex;
    });
  }
  
  function advance() {
    clearTimeout(timeout);
    timeout = setTimeout(function() {
      if (currentIndex < ($slides.length - 1)) {
        move(currentIndex + 1);
      } else {
        move(0);
      }
    }, 4000);
  }
  
  $('.next_btn').on('click', function() {
    if (currentIndex < ($slides.length - 1)) {
      move(currentIndex + 1);
    } else {
      move(0);
    }
  });
  
  $('.previous_btn').on('click', function() {
    if (currentIndex !== 0) {
      move(currentIndex - 1);
    } else {
      move(3);
    }
  });
  
  $.each($slides, function(index) {
    var $button = $('<a class=slide_btn>•</a>');
    
    if (index === currentIndex) {
      $button.addClass('active');
    }
    $button.on('click', function() {
      move(index);
    }).appendTo('.slide_buttons');
    bulletArray.push($button);
  });
  
  advance();
});


dan coba kalian jalan kan yah teman teman..



kembali



nah seperti itu  lah cara Merancang Slider keren dengan JQuery, semoga bermanfaat yah teman teman



 




Sumber https://kursuswebsite.org

Popular posts from this blog

Perbedaan Antara Keyup dan Keydown Pada jQuery

Even di javascript adalah sebuah suatu yang terjadi di element tertentu, maksudnya yaitu suatu respon atau aksi yang di lakukan oleh user dimana kegiatan tersebut akan memicu jalannya script javascript yang terdapat di blog tersebut. Di javascript terdapat banyak event namun di pembahasan kali ini kita akan membahas mengenai Perbedaan Antara Keyup dan Keydown Di jQuery, Keyup adalah sebuah event yang akan di jalankan ketika tombol dilepaskan di di keyboard, dan sedangkan Keydown adalah sebuah event ketika tombol ditekan di keyboard.
Read more

Membuat Table Warna Berselang dengan PHP

Image
Selamat datang di blog Source Code Aplikasi, masih dengan File yang kemarin, tapi sekarang ini kita akan menggunakan Framework Bootstrap dan Membangun Table Warna Berselang dengan PHP, jadi jangan lupa yang kemarin praktekin dulu yah teman teman link nya yang ini . oka seketika saja kita praktekan.
Read more