Пример:
Слайдер с фиксированным текстом
Текст накладывается на слайдер, в котором листаются только фотографии
HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<div class="sl-container"> <div class="swipe"> <div class="panel" data-img="/photo-1.jpg"></div> <div class="panel" data-img="/photo-2.jpg"></div> <div class="panel" data-img="/photo-3.jpg"></div> <div class="panel" data-img="/photo-4.jpg"></div> <div class="panel" data-img="/photo-5.jpg"></div> </div> <div class="sl-info"> <div class="inner"> <h3>Слайдер с фиксированным текстом</h3> <p>Текст накладывается на слайдер, в котором листаются только фотографии</p> </div> <div class="sl-buttons"> <button class="btn-prev" disabled> <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg> </button> <button class="btn-next"> <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg> </button> </div> </div> </div> |
CSS:
|
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 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 |
.sl-container { width: 100%; height: 500px; margin: 20px 0; padding: 0; font-family: 'Roboto', sans-serif; font-size: 1em; line-height: 1.5em; color: #000; position: relative; } .swipe { position: relative; width: 100%; height: 100%; background: #eee; overflow: hidden; } .panel { position: absolute; width: 100%; min-height: 100%; top: 0; left: 0; padding: 20px; } .left { left: -100%; } .right { left: 100%; } .sl-info { position: absolute; width: 70%; max-width: 500px; bottom: 15%; right: 5%; pointer-events: none; } .inner { position: relative; padding: 0.5em 2em 1em; background: #FFFFFF; box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); } .inner h3 { font-size: 1.7em; font-weight: normal; color: #337AB7; } .inner p { font-family: Verdana, sans-serif; } .sl-info:before { content: ""; position: absolute; width: 65%; height: 80%; top: 0; left: 0; transform: translate(-10px, -10px); background: #337AB7; } .sl-buttons { position: absolute; bottom: -50px; right: 5%; pointer-events: all; } .sl-buttons button { transition: ease .4s; } .sl-buttons button svg { margin: 10px 0; } .sl-buttons .btn-prev, .sl-buttons .btn-next { width: 60px; height: 60px; margin-left: 10px; border: 2px solid #337AB7; outline: none; border-radius: 60px; color: #FFFFFF; background: #337AB7; box-shadow: 0px 3px 15px 2px rgba(0,0,0,.5); cursor: pointer; } .sl-buttons button:hover { box-shadow: 0px 3px 30px 3px rgba(0,0,0,.5); } .sl-buttons button:disabled { box-shadow: 0px 1px 5px 0px rgba(0,0,0,.5); background: #BFE2FF; cursor: default; } .optional { width: 80%; max-width: 680px; margin: 6em auto; padding: 2em 3em; box-shadow: 0 3px 12px rgba(0,0,0,0.16), 0 3px 12px rgba(0,0,0,0.23); } @media (max-width: 620px) { body { font-size: 13px; line-height: 1.5em; } .sl-info { position: absolute; width: 100%; max-width: 100%; bottom: 0; right: 0; } .inner { padding: .5em 1.5em; box-shadow: none; } .sl-buttons { display: none; } } |
jQuery:
|
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 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
$(function(){ var tolerance = 100; var speed = 650; var interactiveElements = $('input, button, a'); var itemsLength = $('.panel').length; var active = 1; for (i=1; i<=itemsLength; i++){ var $layer = $(".panel:nth-child("+i+")"); var bgImg = $layer.attr("data-img"); $layer.css({ "background": "url("+bgImg+") no-repeat center / cover" }); }; setTimeout(function() { $(".panel").css({ "transition": "cubic-bezier(.4,.95,.5,1.5) "+speed+"ms" }); }, 200); $(".panel:not(:first)").addClass("right"); function swipeScreen() { $('.swipe').on('mousedown touchstart', function(e) { var touch = e.originalEvent.touches; var start = touch ? touch[0].pageX : e.pageX; var difference; $(this).on('mousemove touchmove', function(e) { var contact = e.originalEvent.touches, end = contact ? contact[0].pageX : e.pageX; difference = end-start; }); $(window).one('mouseup touchend', function(e) { e.preventDefault(); // Переход вправо: if (active < itemsLength && difference < -tolerance) { $(".panel:nth-child("+active+")").addClass("left"); $(".panel:nth-child("+(active+1)+")").removeClass("right"); active += 1; btnDisable(); }; // Переход влево: if (active > 1 && difference > tolerance) { $(".panel:nth-child("+(active-1)+")").removeClass("left"); $(".panel:nth-child("+active+")").addClass("right"); active -= 1; btnDisable(); }; $('.swipe').off('mousemove touchmove'); }); }); }; swipeScreen(); interactiveElements.on('touchstart touchend touchup', function(e) { e.stopPropagation(); }); // Кнопки: $(".btn-prev").click(function(){ // Переход влево: if (active > 1) { $(".panel:nth-child("+(active-1)+")").removeClass("left"); $(".panel:nth-child("+active+")").addClass("right"); active -= 1; btnDisable(); }; }); $(".btn-next").click(function(){ // Переход вправо: if (active < itemsLength) { $(".panel:nth-child("+active+")").addClass("left"); $(".panel:nth-child("+(active+1)+")").removeClass("right"); active += 1; btnDisable(); }; }); function btnDisable() { if (active >= itemsLength) { $(".btn-next").prop("disabled", true); $(".btn-prev").prop("disabled", false); } else if (active <= 1) { $(".btn-prev").prop("disabled", true); $(".btn-next").prop("disabled", false); } else { $(".btn-prev, .btn-next").prop("disabled", false); }; }; }); |
Фотографии kellepics
Здравствуйте, как сделать чтоб несколько слайдеров корректно работало на одной странице? заранее спасибо!
Здравствуйте, а как сделать что бы и текст менялся?, заранее благодарен
Добавить текст в элемент слайда:
и править стили