Tạo slider cho website/blog bằng jQuery

Bài viết này mình sẽ chia sẻ một thủ thuật tạo slider chạy ngang cho website/blog. Các bạn chỉ cần paste đoạn code sau vào vị trí muốn hiển thị (đối với Blogger thì các bạn tạo 1 tiện ích HTML/JavaScript rồi paste code vào):

<!-- jQuery Slider by kjmagic.blogspot.com -->
<script src='https://dl.dropboxusercontent.com/s/oh0lfkwxmyysjwi/dt-jquery-latest.js?dl=1&token_hash=AAFpXu6eB7mglmP90ExvK8wdehlml72XBazpBf7hFizb8Q'></script>
<script src='https://dl.dropboxusercontent.com/s/4mcw85gb2zqsfm3/dt-slider-jquery.js?dl=1&token_hash=AAFp-t9rXALpZ-lS5o_X6v8GktDsSAFS74Od4paSQTpoWA' type='text/javascript'></script>
<script src='https://dl.dropboxusercontent.com/s/iz64wp1bd66lpea/mycarousel.js?dl=1&token_hash=AAEy02HniPBcp0cJZ4ULRoqHscx9T-AeTcjdkHcq35ZIFw' type='text/javascript'></script>
  <style>

.jcarousel-skin-tango .jcarousel-container {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
   border-radius: 10px;
    background: #F0F6F9;
   
}

.jcarousel-skin-tango .jcarousel-direction-rtl {
    direction: rtl;
}

.jcarousel-skin-tango .jcarousel-container-horizontal {
   width:425px;
    padding: 20px 40px;
}

.jcarousel-skin-tango .jcarousel-container-vertical {
    width: 75px;
    height: 245px;
    padding: 40px 20px;
}

.jcarousel-skin-tango .jcarousel-clip {
    overflow: hidden;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
    width:  425px;
    height: 75px;
}

.jcarousel-skin-tango .jcarousel-clip-vertical {
    width:  75px;
    height: 245px;
}

.jcarousel-skin-tango .jcarousel-item {
    width: 75px;
    height: 75px;
}

.jcarousel-skin-tango .jcarousel-item-horizontal {
    margin-left: 0;
    margin-right: 10px;
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal {
    margin-left: 10px;
    margin-right: 0;
}

.jcarousel-skin-tango .jcarousel-item-vertical {
    margin-bottom: 10px;
}

.jcarousel-skin-tango .jcarousel-item-placeholder {
    background: #fff;
    color: #000;
}

/**
*  Horizontal Buttons
*/
.jcarousel-skin-tango .jcarousel-next-horizontal {
    position: absolute;
    top: 43px;
    right: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH-_WwdRvlgDjxbIIfOagiZEqHmWsIc5-SZsX-JZsnxpfvm7JZHihwrEZsxv9m-Y1PLe2YPbXfg1LED54Bcx9XK3457Fq1vCfkULEMbVvx2AvbvLl26InO7ezmx-Mu7_lP_ViYblzJIg/s660/next-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {
    left: 5px;
    right: auto;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH-_WwdRvlgDjxbIIfOagiZEqHmWsIc5-SZsX-JZsnxpfvm7JZHihwrEZsxv9m-Y1PLe2YPbXfg1LED54Bcx9XK3457Fq1vCfkULEMbVvx2AvbvLl26InO7ezmx-Mu7_lP_ViYblzJIg/s660/next-horizontal.png);
}

.jcarousel-skin-tango .jcarousel-next-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-horizontal:focus {
    background-position: -32px 0;
}

.jcarousel-skin-tango .jcarousel-next-horizontal:active {
    background-position: -64px 0;
}

.jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:focus,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
    cursor: default;
    background-position: -96px 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal {
    position: absolute;
    top: 43px;
    left: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimir9zcMX4prslzoI7SVGK706WxwU0nLtLDCTSO_oDytKQvu_S8UWtnbDzijfGsX2BU8Yb45Cc_MEPS2_EI3XVVA0GFuzT074cOvZcM2K-zmVHE6TPA9ADBtKr6MZ5u1X6stqPwJT-Iw/s660/prev-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal {
    left: auto;
    right: 5px;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH-_WwdRvlgDjxbIIfOagiZEqHmWsIc5-SZsX-JZsnxpfvm7JZHihwrEZsxv9m-Y1PLe2YPbXfg1LED54Bcx9XK3457Fq1vCfkULEMbVvx2AvbvLl26InO7ezmx-Mu7_lP_ViYblzJIg/s660/next-horizontal.png);
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-horizontal:focus {
    background-position: -32px 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
    background-position: -64px 0;
}

.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:focus,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
    cursor: default;
    background-position: -96px 0;
}

/**
*  Vertical Buttons
*/
.jcarousel-skin-tango .jcarousel-next-vertical {
    position: absolute;
    bottom: 5px;
    left: 43px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH-_WwdRvlgDjxbIIfOagiZEqHmWsIc5-SZsX-JZsnxpfvm7JZHihwrEZsxv9m-Y1PLe2YPbXfg1LED54Bcx9XK3457Fq1vCfkULEMbVvx2AvbvLl26InO7ezmx-Mu7_lP_ViYblzJIg/s660/next-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-next-vertical:hover,
.jcarousel-skin-tango .jcarousel-next-vertical:focus {
    background-position: 0 -32px;
}

.jcarousel-skin-tango .jcarousel-next-vertical:active {
    background-position: 0 -64px;
}

.jcarousel-skin-tango .jcarousel-next-disabled-vertical,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:focus,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:active {
    cursor: default;
    background-position: 0 -96px;
}

.jcarousel-skin-tango .jcarousel-prev-vertical {
    position: absolute;
    top: 5px;
    left: 43px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimir9zcMX4prslzoI7SVGK706WxwU0nLtLDCTSO_oDytKQvu_S8UWtnbDzijfGsX2BU8Yb45Cc_MEPS2_EI3XVVA0GFuzT074cOvZcM2K-zmVHE6TPA9ADBtKr6MZ5u1X6stqPwJT-Iw/s660/prev-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-prev-vertical:hover,
.jcarousel-skin-tango .jcarousel-prev-vertical:focus {
    background-position: 0 -32px;
}

.jcarousel-skin-tango .jcarousel-prev-vertical:active {
    background-position: 0 -64px;
}

.jcarousel-skin-tango .jcarousel-prev-disabled-vertical,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:focus,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:active {
    cursor: default;
    background-position: 0 -96px;
}



  </style>


  <ul id="mycarousel" class="jcarousel-skin-tango">
   

<li><a href="Page URL"><img src="IMAGE URL" width="75" height="75" alt="Description" /></a></li>
   

<li><a href="Page URL"><img src="IMAGE URL" width="75" height="75" alt="Description" /></a></li>


<li><a href="Page URL"><img src="IMAGE URL" width="75" height="75" alt="Description" /></a></li>


<li><a href="Page URL"><img src="IMAGE URL" width="75" height="75" alt="Description" /></a></li>


<li><a href="Page URL"><img src="IMAGE URL" width="75" height="75" alt="Description" /></a></li> 

  </ul> 
<center><a href="http://www.đoàntrịnh.vn/2014/03/tao-slider-cho-websiteblog-bang-jquery.html" target="_blank" title="KJ Magic ~ Kiến thức - Thủ thuật - Download - Giải trí" >Tạo widget của bạn</a></center>
<!-- End jQuery Slider by kjmagic.blogspot.com -->

Trong đó:
Page URL: Link sẽ được trỏ đến khi click vào ảnh.
IMAGE URL: Link ảnh.
Description: Mô tả ảnh.
425px: Chiều rộng widget - các bạn có thể thay đổi cho phù hợp với trang.
Để thêm một ảnh, các bạn chỉ cần thêm đoạn code sau vào trước dòng màu xanh và làm tương tự:

<li><a href="Page URL"><img src="IMAGE URL" width="75" height="75" alt="Description" /></a></li>

Chúc các bạn thành công !

Tins-3S

Top Ad unit 728 × 90

Best

Tạo slider cho website/blog bằng jQuery

You May Also Like

Không có nhận xét nào:

Labels

Biểu mẫu liên hệ

TOP

Link