All Projects → alikinvv → previewSlider

alikinvv / previewSlider

Licence: MIT License
Responsive fullscreen image slider where the users are able to preview next/previous image when hovering over the navigation arrows.

Projects that are alternatives of or similar to previewSlider

Kiimagepager
The KIImagePager is inspired by foursquare's ImageSlideshow, the user may scroll through images loaded from the Web
Stars: ✭ 324 (+1925%)
Mutual labels:  gallery, slideshow, preview
Spotlight
Web's most easy to integrate lightbox gallery library. Super-lightweight, outstanding performance, no dependencies.
Stars: ✭ 799 (+4893.75%)
Mutual labels:  gallery, javascript-library
Vue Preview
A Vue Integrated PhotoSwipe Image Preview Plugin
Stars: ✭ 639 (+3893.75%)
Mutual labels:  gallery, preview
Imageslideshow
Swift image slideshow with circular scrolling, timer and full screen viewer
Stars: ✭ 1,612 (+9975%)
Mutual labels:  gallery, slideshow
Ngx Gallery
Angular Gallery, Carousel and Lightbox
Stars: ✭ 417 (+2506.25%)
Mutual labels:  gallery, slideshow
Axphotoviewer
An iOS/tvOS photo gallery viewer, useful for viewing a large (or small!) number of photos.
Stars: ✭ 544 (+3300%)
Mutual labels:  gallery, slideshow
Ng Simple Slideshow
A simple, responsive slideshow for Angular 4+.
Stars: ✭ 119 (+643.75%)
Mutual labels:  gallery, slideshow
Nodeppt
This is probably the best web presentation tool so far!
Stars: ✭ 9,589 (+59831.25%)
Mutual labels:  slideshow, javascript-library
Photos
📸 Your memories under your control
Stars: ✭ 157 (+881.25%)
Mutual labels:  gallery, slideshow
Slider
Touch swipe image slider/slideshow/gallery/carousel/banner mobile responsive bootstrap
Stars: ✭ 2,046 (+12687.5%)
Mutual labels:  gallery, slideshow
React Slideshow
A react component for slideshow supporting slide, fade and zoom
Stars: ✭ 201 (+1156.25%)
Mutual labels:  gallery, slideshow
xGallerify
A lightweight, responsive, smart gallery based on jQuery
Stars: ✭ 52 (+225%)
Mutual labels:  gallery, javascript-library
Editly
Slick, declarative command line video editing & API
Stars: ✭ 3,162 (+19662.5%)
Mutual labels:  slideshow, transition
Filterizr
✨ Filterizr is a JavaScript library that sorts, shuffles and filters responsive galleries using CSS3 transitions ✨
Stars: ✭ 546 (+3312.5%)
Mutual labels:  gallery, javascript-library
Atgmediabrowser
Image slide-show viewer with multiple predefined transition styles, with ability to create new transitions with ease.
Stars: ✭ 186 (+1062.5%)
Mutual labels:  slideshow, transition
Collectionviewpaginglayout
a simple but highly customizable paging layout for UICollectionView.
Stars: ✭ 947 (+5818.75%)
Mutual labels:  gallery, transition
Stfalconimageviewer
A simple and customizable Android full-screen image viewer with shared image transition support, "pinch to zoom" and "swipe to dismiss" gestures
Stars: ✭ 1,734 (+10737.5%)
Mutual labels:  gallery, transition
SimpleSlider
Simple responsive slider created in pure javascript.
Stars: ✭ 21 (+31.25%)
Mutual labels:  slideshow, javascript-library
angular-super-gallery
AngularJS super image gallery
Stars: ✭ 46 (+187.5%)
Mutual labels:  gallery, transition
jquery.skeleton.loader
A jQuery plugin to make screen skeleton loader.
Stars: ✭ 65 (+306.25%)
Mutual labels:  javascript-library

previewSlider

GitHub Issues HitCount License Donations Badge

previewSlider is a responsive fullscreen image slider where the users are able to preview next/previous image when hovering over the navigation arrows.

Clicking on the navigation arrows will transition to the next/prev image after a certain delay, with a countdown progress bar that tells the users how long it will take to start the transition.

Star us on GitHub — it helps!

Live Demo

aligment buttons

Options

  • container (object) - slider initialization container
  • arrowLeft (object) - left arrow
  • arrowRight (object) - right arrow
  • content (boolean) - true to use div as slides, false to use img as slides | Default: false
  • scale (number) - zoom size in preview gallery | Default: 0.4
  • scrollSpeed (number) - scroll speed in preview gallery | Default: 4

Usage

Example of the html markup for image slider:

<div class="preview-slider">
    <div class="slider-wrapper">
        <img class="slider-item" src="img/img1.jpg" alt=""></div>
        <img class="slider-item" src="img/img2.jpg" alt=""></div>
        <img class="slider-item" src="img/img3.jpg" alt=""></div>
    </div>

    <div class="arrow arrow-right"></div>
    <div class="arrow arrow-left"></div>
</div>

Initialization for images slider:

new previewSlider({
    container: '.preview-slider',
    arrowLeft: '.preview-slider .arrow-left',
    arrowRight: '.preview-slider .arrow-right',
});

Example of the html markup for conent slider:

<div class="preview-slider">
    <div class="slider-wrapper">
        <div class="slider-item" style="background-image: url(img/img1.jpg)"></div>
        <div class="slider-item" style="background-image: url(img/img2.jpg)"></div>
        <div class="slider-item" style="background-image: url(img/img3.jpg)"></div>
    </div>

    <div class="arrow arrow-right"></div>
    <div class="arrow arrow-left"></div>
</div>

Initialization for conent slider:

new previewSlider({
    container: '.preview-slider',
    content: true,
    arrowLeft: '.preview-slider arrow-left',
    arrowRight: '.preview-slider .arrow-right',
});

License

This project is licensed under the MIT License - see the LICENSE file for details

Analytics

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].