Cara Tambah Kecil JQuery Circleslider Ke Blogger

1Cara Tambah Kecil JQuery Circleslider Ke Blogger

Kecil Circleslider adalah plugin jQuery kecil yang menghasilkan korsel melingkar gambar.

Ada mencatat rumit tentang menggunakan jenis carousel, namun ketika itu tentang mengubahnya, itu perlu untuk menggunakan sedikit aritmatika. Semua rincian ini dapat ditemukan di homepage penulis , jadi saya hanya akan membatasi diri untuk menunjukkan dasar-dasar.

• 
• 
• 
• 
• 
• 

Jelas, kita perlu menambahkan perpustakaan jQuery javascript dalam template kami:

Langkah 1. Dari Anda dashboard Blogger , pergi ke Template> tekan tombol Edit HTML

. Langkah 2 Cari </ head> (CTRL + F) tag dan tepat di atasnya, tambahkan kode berikut:

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script src="http://helplogger.googlecode.com/svn/trunk/jquery.tinycircleslider.min.js"/>

Kami akan kekurangan gaya CSS yang kita perlu menambahkan di atas </ head> tag juga:

 <style>
# Rotatescroll {/ * adalah wadah persegi panjang * /
height: 300px;
position: relative;
width: 300px;
}
# Rotatescroll. Viewport {/ * adalah persegi panjang yang berisi gambar * /
height: 300px;
position: relative;
margin: 0 auto;
overflow: hidden;
width: 300px
}
# Rotatescroll. Gambaran {/ * adalah daftar dengan gambar * /
kiri: 0;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
top: 0;
}
# Rotatescroll. Gambaran li {/ * setiap item daftar * /
float: left;
height: 300px;
position: relative;
width: 300px;
}
Overlay # rotatescroll. {/ * Gambar dengan lingkaran tumpang tindih daftar * /
background: transparent no-repeat 0 0;
height: 300px;
kiri: 0;
position: absolute;
top: 0;
width: 300px;
}
# Rotatescroll. Jempol {/ * lingkaran merah yang memungkinkan kita untuk menavigasi * /
background: url transparan (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJsETHqt8_SNEX24IRuxMZgoEvyTcBHkPgpFGacR_BiswCnqpNnbRap0pBWjC0b3qQWFaft0gtXrRIxLFZ5neELZKgt2eGydCw2MM1ePxhjgmPYqiq3lIHqovef-RTNx2-xFLBiZY_jcaW/s1600/bg-thumb.png) no-repeat 0 0;
kursor: pointer;
height: 26px;
kiri: 137px;
position: absolute;
top: 3px-;
width: 26px;
z-index: 200;
}
# Rotatescroll. Dot {/ * titik-titik yang menunjukkan posisi setiap gambar * /
background: url transparan (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEituoRcaiFd6oHuiLBhaTJweZqoV9BKU4kMhrlVVZBwBl3Ql7VaQvmgCHTGqu21Y-O56eq2WoqFXNAp03U98_lVXogxOFeR82o1WCUmmgSqnqyHVTgAb3iXzqVoW9l70CdCkoOaaj8BcFfC/s1600/bg-dot.png) no-repeat 0 0;
display: none;
height: 12px;
kiri: 155px;
position: absolute;
top: 3px;
width: 12px;
z-index: 100;
}
# Rotatescroll. Dot rentang {/ * tersembunyi secara default * /
display: none;
}
</ Style>

Screenshot

Langkah 3. Sekarang inilah HTML yang harus ditambahkan ke mana kita ingin menampilkan korsel.
Membuat posting baru dan paste pada bagian HTML, kode di bawah ini:

 <div id="rotatescroll">
<div class="viewport">
<ul class="overview">
<li> <img src=" ImageUrl "/> </ li>
<li> <img src=" ImageUrl "/> </ li>
<li> <img src=" ImageUrl "/> </ li>
<li> <img src=" ImageUrl "/> </ li>
<li> <img src=" ImageUrl "/> </ li>
</ Ul>
</ Div>
<div class="dot"> </ div>
<div class="overlay"> </ div>
<div class="thumb"> </ div>
</ Div>

<script type="text/javascript">
. $ (Document) ready (function () {$ ('# rotatescroll') tinycircleslider ();.});
. $ ('# Rotatescroll') tinycircleslider ({Interval: true, snaptodots: true});
</ Script>

Screenshot

Catatan: mengganti teks ImageUrl dengan URL gambar Anda

dan di sini adalah pilihan lain yang bisa ditambahkan, dipisahkan dengan koma:

snaptodots - false jika anda ingin ada titik-titik yang akan ditampilkan ketika menyeret mereka
hidedots - false jika Anda ingin menampilkan poin intern (secara default adalah true)
intervaltime - adalah waktu antara slide (secara default 3500)
radius - menentukan ukuran lingkaran (secara default adalah 140)