BOOTSTRAP CAROUSEL SLIDESHOW-1
Στο παρακάτω slideshow μπορείτε να βάλετε όσες εικόνες θέλετε, σε ότι
διαστάσεις θέλετε. Το συγκεκριμένο slideshow
διαθέτει και κουμπιά πλοήγησης και bullets για να βλέπετε
τις επόμενες ή τις προηγούμενες εικόνες του, αλλα δεν ξεκινάει αυτόματα.
Αλλάξετε τα links των εικόνων μου μου με τα δικά σας links εικόνων.
ΔΕΙΤΕ ΤΟ ΣΕ ΛΕΙΤΟΥΡΓΙΑ ΣΕ ΕΝΑ DEMO BLOG ΕΔΩ ►
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <style> * {box-sizing: border-box;} .slider {position: relative;width: 800px;height: 450px;margin:1px auto;} .slide {display: none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;} img {width: 100%;height: auto;} .active-slide {display: block;} .slider-nav {text-align: center;margin-top:5px;} .arrow-prev {margin-right: 5px;display: inline-block;font-size:22px;vertical-align: top;margin-top: 15px;} .arrow-next {margin-left: 5px;display: inline-block;font-size:22px;vertical-align: top;margin-top: 15px;} .slider-dots {list-style: none;display: inline-block;padding-left: 0;margin-bottom: 0;} .slider-dots li {color: #f11111;display: inline;font-size:50px;margin-right: 5px;} .slider-dots li.active-dot {color: #115599;} </style> <div class="slider"> <div class="slide active-slide"> <img src="https://i.imgur.com/N4TUuqg.jpg" alt="rodos"></div> <div class="slide"> <img src="https://i.imgur.com/wGsIadF.jpg" alt="rodos"></div> <div class="slide"><img src="https://i.imgur.com/TidabmU.jpg" alt="rodos"></div> <div class="slide"><img src="https://i.imgur.com/3SRq2CR.jpg" alt="rodos"></div> <div class="slide"><img src="https://i.imgur.com/MoYkPMR.jpg" alt="rodos"></div> <div class="slide"><img src="https://i.imgur.com/VTKt0Ne.jpg" alt="rodos"></div> </div> <div class="slider-nav"> <a href="#" class="arrow-prev"><i class="fa fa-angle-left" aria-hidden="true"></i></a> <ul class="slider-dots"> <li class="dot active-dot">•</li> <li class="dot">•</li> <li class="dot">•</li> <li class="dot">•</li> <li class="dot">•</li> <li class="dot">•</li> </ul> <a href="#" class="arrow-next"><i class="fa fa-angle-right" aria-hidden="true"></i></a></div> <script> var main = function() { $('.arrow-next').click(function() { var currentSlide = $('.active-slide'); var nextSlide = currentSlide.next(); var currentDot = $('.active-dot'); var nextDot = currentDot.next(); if (nextSlide.length == 0) { nextSlide = $('.slide').first(); nextDot = $('.dot').first();} currentSlide.fadeOut(600).removeClass('active-slide'); nextSlide.fadeIn(600).addClass('active-slide'); currentDot.removeClass('active-dot'); nextDot.addClass('active-dot');}); $('.arrow-prev').click(function() { var currentSlide = $('.active-slide'); var prevSlide = currentSlide.prev(); var currentDot = $('.active-dot'); var prevDot = currentDot.prev(); if (prevSlide.length == 0) { prevSlide = $('.slide').last(); prevDot = $('.dot').last();} currentSlide.fadeOut(600).removeClass('active-slide'); prevSlide.fadeIn(600).addClass('active-slide'); currentDot.removeClass('active-dot'); prevDot.addClass('active-dot');});}; $(document).ready(main);</script> |
Δεν υπάρχουν σχόλια:
Δημοσίευση σχολίου
► Γράψτε το σχόλιό σας στο λευκό κουτί και αν θέλετε να ειδοποιηθήτε για την απάντηση τσεκάρετε το κουτάκι "Να λαμβάνω ειδοποιήσεις".
Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.