Clever Geek Ideas

JQuery-слайдеры изображений: примеры

. , . , . jQuery : , , .

, . , , . .

: , jQuery, CSS. , .

jQuery . , , .

  1. .
  2. . jQuery .
  3. , .
  4. .

Distractful

jQuery-. :





  • ;
  • - , , ;
  • ;
  • .

, jQuery.

Neoslide

jQuery 2 : JavaScript CSS. :

<div class="banner-wrap">

<div class="banner">

<ul class="banner-img">

<li><img /></li>

<li><img /></li>

<li><img /></li>

</ul>

<div class="top"><p></p></div>

<ul class="list">

<li class="curr"></li>

</ul>

<img class="prew-img" />

</div>

body :

$(function() {

$('.banner').neoslide();

});

: 1390 px 450 px . - 400 , .

Hslider

jQuery- , . JavaScript, , .

:

<div class="hsldr-container">

<figure>

<img src="images/image1.jpg" />

<figcaption>Car in the snow</figcaption>

</figure>

<figure>

<img src="images/Image2.jpg" />

<figcaption>People surfing</figcaption>

</figure>

</div>

<script src="js/jquery-2.2.1.min.js"></script>

<script src="js/imagesloaded.pkgd.min.js"></script>

<script src="js/jquery.hslider.js"></script>

<script type="text/javascript">

$( document ).ready(function() {

$( ".hsldr-container" ).hslider({

navBar: true,

auto: true,

delay: 4000

});

});

</script>

Sleek Slider

Sleek Slider - jQuery, 2 . jQuery SleekSlider.









<script src="//code.jquery.com/jquery-latest-version.min.js"></script>

<script src="javascripts/sleekslider.min.js"></script>

svg- -.

<div class="svg-wrap">

<svg width="64" height="64" viewBox="0 0 64 64">

<path id="arrow-left" d="M46.077 55.738c0.858 0.867 0.858 2.266 0 3.133s-2.243 0.867-3.101 0l-25.056-25.302c-0.858-0.867-0.858-2.269 0-3.133l25.056-25.306c0.858-0.867 2.243-0.867 3.101 0s0.858 2.266 0 3.133l-22.848 23.738 22.848 23.738z" />

</svg>

<svg width="64" height="64" viewBox="0 0 64 64">

<path id="arrow-right" d="M17.919 55.738c-0.858 0.867-0.858 2.266 0 3.133s2.243 0.867 3.101 0l25.056-25.302c0.858-0.867 0.858-2.269 0-3.133l-25.056-25.306c-0.858-0.867-2.243-0.867-3.101 0s-0.858 2.266 0 3.133l22.848 23.738-22.848 23.738z" />

</svg>

</div>

HTML sleekslider, slide active bg-1, slide-container, slide-content.

<div class="sleekslider">

<!-- Slider Pages -->

<div class="slide active bg-1">

<div class="slide-container">

<div class="slide-content">

<h1>Slide 1 Content Here</h1>

</div>

</div>

</div>

<div class="slide bg-2">

<div class="slide-container">

<div class="slide-content">

<h1>Slide 2 Some Content Here</h1>

</div>

</div>

</div>

<div class="slide bg-3">

<div class="slide-container">

<div class="slide-content">

<h1>Slide 3 Content Here</h1>

</div>

</div>

</div>

<div class="slide bg-4">

<div class="slide-container">

<div class="slide-content">

<h1>Slide 4 Some Content Here</h1>

</div>

</div>

</div>

<div class="slide bg-5">

<div class="slide-container">

<div class="slide-content">

<h1>Slide 5 Content Here</h1>

</div>

</div>

</div>

<a href="https://www.jqueryscript.net/tags.php?/Navigation/">Navigation</a> Arrows with <a href="https://www.jqueryscript.net/tags.php?/Thumbnail/">Thumbnail</a>

<nav class="nav-split"> <a class="prev" href=""> <span class="icon-wrap"><svg class="icon" width="22" height="22" viewBox="0 0 64 64">

<use xlink:href="#arrow-left" />

</svg></span>

<div>

<h3>test</h3>

<img alt="Previous thumb"/> </div>

</a> <a class="next" href=""> <span class="icon-wrap"><svg class="icon" width="22" height="22" viewBox="0 0 64 64">

<use xlink:href="#arrow-right" />

</svg></span>

<div>

<h3>test</h3>

<img alt="Next thumb"/> </div>

</a> </nav>

<!-- Pagination -->

<nav class="pagination"> <span class="current"></span> <span></span> <span></span> <span></span> <span></span> </nav>

<!-- Navigation Tabs -->

<nav class="tabs">

<div class="tab-container">

<ul>

<li class="current"><a href="#"><span>01</span> Slide</a></li>

<li><a href="#"><span>02</span> Slide</a></li>

<li><a href="#"><span>03</span> Slide</a></li>

<li><a href="#"><span>04</span> Slide</a></li>

<li><a href="#"><span>05</span> Slide</a></li>

</ul>

</div>

</nav>

</div>

, . , nav tabs.

, -. .

:

$(document).ready(function(){

$('.sleekslider').sleekslider({

thumbs: ['1.jpg', '2.jpg', '3.jpg','4.jpg','5.jpg'],

labels:['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5'],

speed: 6000 // transition speed

});

})

6 , 1.jpg - 5.jpg, Slide 1 - Slide 5.

PaW Carousel

jQuery 6 , . PaW , . , . , Internet Explorer 7+.

, , :

$(function(){

$('.paw-carousel').(args);

// If you want to add another carousel on the same page

$('.paw-carousel-2').pawCarousel();

});

pawCarousel :

  • pawCarousel - , - paw-carousel-item;
  • carouselNavItemCls - , - paw-carousel-nav-item;
  • activeCls , active;
  • animSpeed .

paw-carousel-wrap > paw-carousel > paw-carousel-items-wrap, - paw-carousel-items. paw-carousel-prev paw-carousel-next, - nav.paw-carousel-thumbs > ul > paw-carousel-nav-item.

Slick

"-" - - jQuery .





10 :

  • ;
  • , ;
  • ;
  • ;
  • ;
  • ;
  • ;
  • ;
  • ;
  • .

:

<link rel="stylesheet" type="text/css" href="slick/slick.css"/>

<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>

JavaScript:

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>

<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<script type="text/javascript" src="slick/slick.min.js"></script>

:

$(document).ready(function(){

$('.your-class').slick({

setting-name: setting-value

});

});

Your-class - .

:

  1. Arrows . true.
  2. Autoplay false .
  3. autoplaySpeed , 3000.
  4. cssEase .
  5. dots: true.
  6. DotsClass .
  7. , draggable true.
  8. pauseOnFocus, - focusOnSelect.
  9. Infinite - .
  10. , swipe: true.
  11. CSS useCSS false useTransform false.
  12. , . vertical true.
  13. - rtl: true.

bxSlider

jQuery- .





  1. .
  2. .
  3. .
  4. , , HTML-.
  5. .
  6. CSS.
  7. Firefox, Chrome, Safari, iOS, Android, IE7+.

, . bxslider. jQuery:

<script>jQuery(document).ready(function(){

jQuery('.bxslider').bxSlider();

});</script>

:

  1. Mode . 'horizontal', 'vertical', 'fade'.
  2. speed .
  3. slideMargin.
  4. randomStart false , . true, .
  5. slideSelector. pagerSelector.
  6. infiniteLoop: true.
  7. , , . captions: true, title.
  8. , tickerHover: true.
  9. - , video: true. plugins/jQuery.fitvids.js.
  10. CSS easing. UseCSS: true , , false - .
  11. , , pager: true. : 1/5. pagerType: 'full', - pagerType: ‘short'. , pagerShortSeparator.

CarouFredSel

jQuery , . , .





. : , , .

:

  • infinite , ;
  • direction , left right;
  • width ;
  • align ;
  • cookie .

Cloud Carousel

, .





, xPos yPos. - .

Elastislide

-, .





GitHub, . PHP.

var $items = $('<li><a href="#"><img src="images/large/1.jpg" alt="image01" /></a></li><li><a href="#"><img src="images/large/2.jpg" alt="image01" /></a></li>');

$('#carousel').append($items).elastislide( 'add', $items );

Orientation : . Speed , 500. minItems. , imgSizeItemSelector. 0, . . autoSlide: true. margin, - border.

jCarousel Lite

. , , . : IE 6, Firefox 3, Opera 9.5, Safari 3.

:

  • btnPrev btnNext ID ;
  • mouseWheel;
  • vertical;
  • circular - ;
  • visible;
  • start , .

3D-

.

3




- . , , - . , . , JavaScript.

Feature Carousel

, , . 0.5.

. , . jQuery CSS. .

  1. , , id carousel.
  2. carousel-feature - .
  3. carousel-caption - .
  4. carousel-right carousel-left - .

:

$('#carousel').featureCarousel({});

Rcarousel

Rcarousel, , .





, . 2012 , , .

:

  • Internet Explorer 7+;
  • Firefox 3.0+;
  • Chrome;
  • Opera 10.10+;
  • Safari 4.0.5+.

;

  • visible - ;
  • step - , ;
  • width - ;
  • speed - ;
  • orientation - .

id ui-carousel-next ui-carousel-prev. , navigation .

navigation: {

prev: ".someFancyClass",

next: "#andFunnyID"

}

someFancyClass, - andFunnyID.

Pure CSS3 slider

CSS. , .

<div id="slider"> <div class="slides">
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    
<!-- First slide --> <div class="slider"><div class="legend"></div> <div class="content"> <div class="content-txt"> <h1> Your title </h1> <h2> Your description </h2> </div> </div> <div class="images"> <img src="ImagePath/ImageName.jpg"> </div> </div>

<!-- Second slide --> <div class="slider"><div class="legend"></div> <div class="content"> <div class="content-txt"> <h1> Your title </h1> <h2> Your description </h2> </div> </div> <div class="images"> <img src="ImagePath/ImageName.jpg"> </div> </div>

<!-- Third slide --> <div class="slider"><div class="legend"></div> <div class="content"> <div class="content-txt"> <h1> Your title </h1> <h2> Your description </h2> </div> </div> <div class="images"> <img src="ImagePath/ImageName.jpg"> </div> </div>

<!-- Fourth slide --> <div class="slider"><div class="legend"></div> <div class="content"> <div class="content-txt"> <h1> Your title </h1> <h2> Your description </h2> </div> </div> <div class="images"> <img src="ImagePath/ImageName.jpg"> </div> </div>

</div> </div>

, JavaScript. , . - slider-ltr.css, - slider-ttb.css. slider-btt.css, - slider-simp.css.

. -. , . block :

$( "  id " ).(  );

- , . . : , .



More articles:


All Articles