Slider terkait: Cara Membuat Images Slideshow Menggunakan Jquery

• 

  Title #1

  Content Text...
• 

  Title #2

  Content Text...
• 

  Title #3

  Content Text...
• 

  Title #4

  Content Text...

Cara Membuat Images Slider Tanpa Jquery:

1. Jalankan aplikasi text editor seperti 'notepad' untuk menulis sebuah dokumen HTML. Mungkin notepad bawaan windows kurang begitu menarik, solusinya Anda dapat menggunakan aplikasi notepad++ yang dapat Anda download di sini.


2. Penting! simpan dokumen HTML dengan format 'Nama_File.html' tanpa tanda kutip, kemudian pada 'Save as type' Anda pilih 'All files' agar dokumen yang Anda simpan menjadi dokumen HTML bukan dokumen text biasa.


3. Sekarang mari kita mulai untuk membuat CSS3 Slider pada dokumen HTML seperti pada kotak di bawah ini.

Cara Ofline>>>saya copy CSS ke QuickTextEditor kalau belum punya Anda download di sini. trus saya buka lewat Mozilla jadinya gambar bawah sebagai contoh

Lihat gambar bawah pintu masuk>>> HTML

 Copy di CSS diKotak Kosong lihat gambar atas

Kode dibawah untuk gambar sengaja saya bikin berbeda ukuran, nanti kamu ganti sendiri aja sesuai template kamu
 Contoh :
<a href="#">>>>>Link Sasaran kemana mau diarahkan yang jelas sesuai dengan gambar ada kaitannya

Warna merah link bawah itu link gambar>>>yang mau ditampilkan
<img alt="Cara Membuat Images Slider Tanpa Jquery" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3uCjJmiEMArGSpdQrivh1y2Hajq4NPolTe7Ve_pUDH0-tl1vwHDVkz1zesKkz3IkFU2wEGayPKBnR17Nr95eCMDaR3nC8nD-DMOcHml2m1683uJsVX8aiOpd1Bze-GTIzk2yvbKMriyj1/s640/post-1.jpg" /></a>

<a href="#" imageanchor="1"><img alt="Cara Membuat Images Slider Tanpa Jquery" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3uCjJmiEMArGSpdQrivh1y2Hajq4NPolTe7Ve_pUDH0-tl1vwHDVkz1zesKkz3IkFU2wEGayPKBnR17Nr95eCMDaR3nC8nD-DMOcHml2m1683uJsVX8aiOpd1Bze-GTIzk2yvbKMriyj1/s640/post-1.jpg" /></a>

<h3>
Title #2</h3>>>>>>>>TEk terserah kamu>>>bagusnya sesuikan gambar terkait
Content Text...</div>>>>>Keterangan gambaran dan tek yang sesui gambar yang ditampilkan
</li>
<li>


XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Link batas Copy dibawah mulai kata >>>>><div>


<div>
<style type="text/css">


.slider-container {
 width: 675px;
 height: 300px;
 margin: 0px;
 padding: 10px 15px;
 border: 0 inset;
 -moz-border-radius: 5px;  
 -webkit-border-radius: 5px;
 box-shadow: 0 0 10px #333;
 -moz-box-shadow: 0 0 10px #333;
 -webkit-box-shadow: 0 0 10px #333;
 overflow: hidden;
}

.slider {
    width: 675px;
    height: 300px;
    position: relative;
    right: 40px;
 overflow: hidden;
}

.slider ul {
    list-style: none;
}

@-webkit-keyframes anim_slider {
    0% {
        opacity: 0;
    }
    6% {
        opacity: 1;
    }
    24% {
        opacity: 1;
    }
    30% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@-moz-keyframes anim_slider {
    0% {
        opacity: 0;
    }
    6% {
        opacity: 1;
    }
    24% {
        opacity: 1;
    }
    30% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

.slider ul li {
 position: absolute;
 opacity: 0;
    top: 0;

    -webkit-animation-name: anim_slider;
    -webkit-animation-duration: 24.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_slider;
    -moz-animation-duration: 24.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}

.slider ul  li:nth-child(2), .slider ul  li:nth-child(2) div {
    -webkit-animation-delay: 6.0s;
    -moz-animation-delay: 6.0s;
}
.slider ul  li:nth-child(3), .slider ul  li:nth-child(3) div {
    -webkit-animation-delay: 12.0s;
    -moz-animation-delay: 12.0s;
}
.slider ul  li:nth-child(4), .slider ul  li:nth-child(4) div {
    -webkit-animation-delay: 18.0s;
    -moz-animation-delay: 18.0s;
}

.slider ul li a {
    text-decoration: none;
 color: #fff;
}

.slider ul li p {
 color: #fff;
 font-size: 12px;
 margin-top: -12px;
 padding: 0 15px;
 filter: alpha(opacity=80);
    -moz-opacity: 0.8;
 -khtml-opacity: 0.8;
    opacity: 0.8;
}

.slider ul li  img a {
    display: block;
    float: left;
    width: 100%;
}

@-webkit-keyframes captions {
    0% {
        top: 100%;
        opacity: 0;
    }
    5% {
        top: 80%;
        opacity: 1;
    }
    20% {
        top: 80%;
        opacity: 1;
    }
    25% {
        top: 100%;
        opacity: 0;
    }
    100% {
        top: 100%;
        opacity: 0;
    }
}

@-moz-keyframes captions {
    0% {
        top: 100%;
        opacity: 0;
    }
    5% {
        top: 80%;
        opacity: 1;
    }
    20% {
        top: 80%;
        opacity: 1;
    }
    25% {
        top: 100%;
        opacity: 0;
    }
    100% {
        top: 100%;
        opacity: 0;
    }
}

.slider h3 {
 text-transform: uppercase;
 color: #fff;
 font-size: 14px;
 line-height: 14px;
        margin-top: 0;
 padding: 10px 15px 0;
 filter: alpha(opacity=80);
        -moz-opacity: 0.8;
 -khtml-opacity: 0.8;
        opacity: 0.8;
}

.slider ul li div {
 text-align: center;
    color: #fff;
    background-color: rgba(45, 44, 44, 0.7);
    background: rgba(45, 44, 44, 0.7);
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 0;
    width: 500px;
    z-index :999;

    -webkit-animation-name: captions;
    -webkit-animation-duration: 24.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
 
    -moz-animation-name: captions;
    -moz-animation-duration: 24.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}
</style>

<br />
<div class="slider-container">
<div class="slider">
<ul>
<li>
     
<a href="#" imageanchor="1"><img alt="Cara Membuat Images Slider Tanpa Jquery" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3uCjJmiEMArGSpdQrivh1y2Hajq4NPolTe7Ve_pUDH0-tl1vwHDVkz1zesKkz3IkFU2wEGayPKBnR17Nr95eCMDaR3nC8nD-DMOcHml2m1683uJsVX8aiOpd1Bze-GTIzk2yvbKMriyj1/s640/post-1.jpg" /></a>

      <div>
<h3>
Title #1</h3>
Content Text...</div>
</li>
<li>
     
<a href="https://www.blogger.com/blogger.g?blogID=7258918381935128484#" imageanchor="1"><img alt="Cara Membuat Images Slider Tanpa Jquery" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhInzCz7kXP3AWdyx-dDtiP7DfQReaMvVxJbQnsLgtyDzoqjX42sUPSmU4qu2hyphenhyphenfF32Rc43V1PzQSsldBcj99hdBsoWzeN-SQxFO6cNhVJkELRv7bgjSzqFOTLkfxzLpvvRf8qej9C046JI/s640/mainscreenshot.png" /></a>
  
      <div>
<h3>
Title #2</h3>
Content Text...</div>
</li>
<li>
     
<a href="https://www.blogger.com/blogger.g?blogID=7258918381935128484#" imageanchor="1"><img alt="Cara Membuat Images Slider Tanpa Jquery" border="0" src="https://www.static-src.com/siva/asset//03_2017/SCB-FEATURED-PARTNERq3s.png" /></a>

   <div>
<h3>
Title #3</h3>
Content Text...</div>
</li>
<li>
  
<a href="https://www.blogger.com/blogger.g?blogID=7258918381935128484#" imageanchor="1"><img alt="Cara Membuat Images Slider Tanpa Jquery" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQDmmIBZpnVEa6i2U2Drvd2l5ThKTMLFH77lqyEQzmfxn2MYjRtqrzEUntMf3WS0cuWCTsf5dP1AGAAVG8nhtNcRDi5BXuuafT1mW8i4SVr1-zIasohMDwwlaiQ5sGpmh3ik3XgLdq9GU/s1600/4.jpg" /></a>

      <div>
<h3>
Title #4</h3>
Content Text...</div>
</li>
</ul>
</div>
</div>
</div>