#html #css #slider #carousel
Вопрос:
У меня есть отзыв о карусели, карусель работает с помощью кнопки со стрелкой вправо, влево и автоматической прокрутки, я хотел бы автоматически скользить по изображениям и тексту, конкретному лицу с отзывом нужно поместить заголовок в верхней части изображения и описание в нижней части изображения, в соответствии со слайдом изображения, заголовок и описание должны отображаться в середине отзыва для каждого участника с отзывом, я прикрепил изображение для справки, у кого-то есть такой раздел с отзывами, поэтому, пожалуйста, поделитесь со мной, пожалуйста, помогите мне по-настоящему оценить
#quote-carousel {
padding: 0 10px 30px 10px;
margin-top: 60px;
}
#quote-carousel .carousel-control {
background: none;
color: #ffc20e;
font-size: 1.5em;
text-shadow: none;
margin-top: 30px;
}
#quote-carousel .carousel-indicators {
position: relative;
left: 30%;
top: auto;
bottom: 0px;
z-index: 0;
width: 100%;
}
#quote-carousel .carousel-indicators li {
width: 100px;
height:70px;
cursor: pointer;
opacity: 0.4;
overflow: hidden;
/*transition: all .4s ease-in;
vertical-align: middle;*/
}
#quote-carousel .carousel-indicators .active {
width: 200px;
height: 128px;
opacity: 1;
/*transition: all .4s ease-in;*/
}
.item blockquote {
border-left: none;
margin: 0;
background-color: white;
}
.item blockquote p:before {
content: "f10d";
font-family: 'Fontawesome';
float: left;
margin-right: 10px;
}
.item blockquote p {
font-family: "Open Sans";
font-size: 18px;
color:#007176;
}
.item blockquote .small, blockquote footer, blockquote small{
color:#007176;
font-size:17px;
font-weight: 600;
padding-right: 20px;
margin-top: 10px;
}
.testimonial-country{
color:#ffc20e
}
.testimonial-bg{
background: #ffecc1;
height: 170px;
width: 250px;
position: absolute;
left: 39%;
top: 42%;
}
blockquote .small:before, blockquote footer:before, blockquote small:before{
content:none;
}
.carousel-indicators li{
border:0px;
} <div class="carousel slide" data-ride="carousel" id="quote-carousel">
<!-- Carousel Slides / Quotes -->
<div class="carousel-inner text-center">
<!-- Quote 1 -->
<div class="item active">
<blockquote>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<small>Heading | <span class="testimonial-country">Sub Heading<span></small>
</div>
</div>
</blockquote>
</div>
<!-- Quote 2 -->
<div class="item">
<blockquote>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<small>Heading | <span class="testimonial-country">Sub Heading<span></small>
</div>
</div>
</blockquote>
</div>
<!-- Quote 3 -->
<div class="item">
<blockquote>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<small>Heading | <span class="testimonial-country">Sub Heading<span></small>
</div>
</div>
</blockquote>
</div>
<div class="item">
<blockquote>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<small>Heading | <span class="testimonial-country">Sub Heading<span></small>
</div>
</div>
</blockquote>
</div>
<div class="item">
<blockquote>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<small>Heading | <span class="testimonial-country">Sub Heading<span></small>
</div>
</div>
</blockquote>
</div>
</div>
<!-- Bottom Carousel Indicators -->
<div class="testimonial-bg"></div>
<ol class="carousel-indicators">
<li data-target="#quote-carousel" data-slide-to="0" class="active"><img class="img-responsive" src="images/testimonial/testimonial-1.jpg" alt="">
</li>
<li data-target="#quote-carousel" data-slide-to="1"><img class="img-responsive" src="images/testimonial/testimonial-2.jpg" alt="" >
</li>
<li data-target="#quote-carousel" data-slide-to="2"><img class="img-responsive" src="images/testimonial/testimonial-3.jpg" alt="">
</li>
<li data-target="#quote-carousel" data-slide-to="3"><img class="img-responsive" src="images/testimonial/testimonial-4.jpg" alt="">
</li>
<li data-target="#quote-carousel" data-slide-to="4"><img class="img-responsive" src="images/testimonial/testimonial-5.jpg" alt="">
</li>
</ol>
<!-- Carousel Buttons Next/Prev -->
<a data-slide="prev" href="#quote-carousel" class="left carousel-control"><i class="fa fa-chevron-left"></i></a>
<a data-slide="next" href="#quote-carousel" class="right carousel-control"><i class="fa fa-chevron-right"></i></a>
</div> Комментарии:
1. Вы используете bootstrap? Если да, то какая версия?
Ответ №1:
Это может соответствовать вашим потребностям:
// vars
'use strict'
var testim = document.getElementById("testim"),
testimDots = Array.prototype.slice.call(document.getElementById("testim-dots").children),
testimContent = Array.prototype.slice.call(document.getElementById("testim-content").children),
testimLeftArrow = document.getElementById("left-arrow"),
testimRightArrow = document.getElementById("right-arrow"),
testimSpeed = 4500,
currentSlide = 0,
currentActive = 0,
testimTimer,
touchStartPos,
touchEndPos,
touchPosDiff,
ignoreTouch = 30;
;
window.onload = function() {
// Testim Script
function playSlide(slide) {
for (var k = 0; k < testimDots.length; k ) {
testimContent[k].classList.remove("active");
testimContent[k].classList.remove("inactive");
testimDots[k].classList.remove("active");
}
if (slide < 0) {
slide = currentSlide = testimContent.length-1;
}
if (slide > testimContent.length - 1) {
slide = currentSlide = 0;
}
if (currentActive != currentSlide) {
testimContent[currentActive].classList.add("inactive");
}
testimContent[slide].classList.add("active");
testimDots[slide].classList.add("active");
currentActive = currentSlide;
clearTimeout(testimTimer);
testimTimer = setTimeout(function() {
playSlide(currentSlide = 1);
}, testimSpeed)
}
testimLeftArrow.addEventListener("click", function() {
playSlide(currentSlide -= 1);
})
testimRightArrow.addEventListener("click", function() {
playSlide(currentSlide = 1);
})
for (var l = 0; l < testimDots.length; l ) {
testimDots[l].addEventListener("click", function() {
playSlide(currentSlide = testimDots.indexOf(this));
})
}
playSlide(currentSlide);
// keyboard shortcuts
document.addEventListener("keyup", function(e) {
switch (e.keyCode) {
case 37:
testimLeftArrow.click();
break;
case 39:
testimRightArrow.click();
break;
case 39:
testimRightArrow.click();
break;
default:
break;
}
})
testim.addEventListener("touchstart", function(e) {
touchStartPos = e.changedTouches[0].clientX;
})
testim.addEventListener("touchend", function(e) {
touchEndPos = e.changedTouches[0].clientX;
touchPosDiff = touchStartPos - touchEndPos;
console.log(touchPosDiff);
console.log(touchStartPos);
console.log(touchEndPos);
if (touchPosDiff > 0 ignoreTouch) {
testimLeftArrow.click();
} else if (touchPosDiff < 0 - ignoreTouch) {
testimRightArrow.click();
} else {
return;
}
})
} <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400amp;display=swap" rel="stylesheet">
*,
*:after,
*:before {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-user-select: none;
-ms-user-select: none;
-o-user-select: none;
-moz-user-select: none;
user-select: none;
cursor: defau<
}
html {
width: 100%;
height: auto;
}
body {
font-family: 'Montserrat', sans-serif!important;
width: 100%;
height: auto;
font-size: 14px;
/* font-family: Dubai-Light; */
background: #fff;
overflow:hidden;
}
.testim {
width: 100%;
position: absolute;
top: 50%;
-webkit-transform: translatey(-50%);
-moz-transform: translatey(-50%);
-ms-transform: translatey(-50%);
-o-transform: translatey(-50%);
transform: translatey(-50%);
}
.testim .wrap {
position: relative;
width: 100%;
max-width: 1020px;
padding: 40px 20px;
margin: auto;
}
.testim .arrow {
display: block;
position: absolute;
color: #333;
cursor: pointer;
font-size: 2em;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
padding: 5px;
z-index: 22222222;
}
.testim .arrow:before {
cursor: pointer;
}
.testim .arrow:hover {
color: green;
}
.testim .arrow.left {
left: 70px;
}
.testim .arrow.right {
right: 70px;
}
.testim .dots {
text-align: center;
position: absolute;
width: 100%;
bottom: 60px;
left: 0;
display: block;
z-index: 3333;
height: 12px;
}
.testim .dots .dot {
list-style-type: none;
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
border: 1px solid green;
margin: 0 10px;
cursor: pointer;
-webkit-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
position: relative;
}
.testim .dots .dot.active,
.testim .dots .dot:hover {
background: green;
border-color: green;
}
.testim .dots .dot.active {
-webkit-animation: testim-scale .5s ease-in-out forwards;
-moz-animation: testim-scale .5s ease-in-out forwards;
-ms-animation: testim-scale .5s ease-in-out forwards;
-o-animation: testim-scale .5s ease-in-out forwards;
animation: testim-scale .5s ease-in-out forwards;
}
.testim .cont {
position: relative;
overflow: hidden;
}
.testim .cont > div {
text-align: center;
position: absolute;
top: 0;
left: 0;
padding: 0 0 70px 0;
opacity: 0;
}
.testim .cont > div.inactive {
opacity: 1;
}
.testim .cont > div.active {
position: relative;
opacity: 1;
}
.testim .cont div .img img {
display: block;
width: 100px;
height: 100px;
margin: auto;
border-radius: 50%;
}
.testim .cont div h2 {
color: green;
font-size: 1em;
margin: 15px 0;
}
.testim .cont div p {
font-size: 1.15em;
color: #333;
width: 70%;
margin: auto;
}
.testim .cont div.active .img img {
-webkit-animation: testim-show .5s ease-in-out forwards;
-moz-animation: testim-show .5s ease-in-out forwards;
-ms-animation: testim-show .5s ease-in-out forwards;
-o-animation: testim-show .5s ease-in-out forwards;
animation: testim-show .5s ease-in-out forwards;
}
.testim .cont div.active h2 {
-webkit-animation: testim-content-in .4s ease-in-out forwards;
-moz-animation: testim-content-in .4s ease-in-out forwards;
-ms-animation: testim-content-in .4s ease-in-out forwards;
-o-animation: testim-content-in .4s ease-in-out forwards;
animation: testim-content-in .4s ease-in-out forwards;
}
.testim .cont div.active p {
-webkit-animation: testim-content-in .5s ease-in-out forwards;
-moz-animation: testim-content-in .5s ease-in-out forwards;
-ms-animation: testim-content-in .5s ease-in-out forwards;
-o-animation: testim-content-in .5s ease-in-out forwards;
animation: testim-content-in .5s ease-in-out forwards;
}
.testim .cont div.inactive .img img {
-webkit-animation: testim-hide .5s ease-in-out forwards;
-moz-animation: testim-hide .5s ease-in-out forwards;
-ms-animation: testim-hide .5s ease-in-out forwards;
-o-animation: testim-hide .5s ease-in-out forwards;
animation: testim-hide .5s ease-in-out forwards;
}
.testim .cont div.inactive h2 {
-webkit-animation: testim-content-out .4s ease-in-out forwards;
-moz-animation: testim-content-out .4s ease-in-out forwards;
-ms-animation: testim-content-out .4s ease-in-out forwards;
-o-animation: testim-content-out .4s ease-in-out forwards;
animation: testim-content-out .4s ease-in-out forwards;
}
.testim .cont div.inactive p {
-webkit-animation: testim-content-out .5s ease-in-out forwards;
-moz-animation: testim-content-out .5s ease-in-out forwards;
-ms-animation: testim-content-out .5s ease-in-out forwards;
-o-animation: testim-content-out .5s ease-in-out forwards;
animation: testim-content-out .5s ease-in-out forwards;
}
@-webkit-keyframes testim-scale {
0% {
-webkit-box-shadow: 0px 0px 0px 0px #eee;
box-shadow: 0px 0px 0px 0px #eee;
}
35% {
-webkit-box-shadow: 0px 0px 10px 5px #eee;
box-shadow: 0px 0px 10px 5px #eee;
}
70% {
-webkit-box-shadow: 0px 0px 10px 5px #ea830e;
box-shadow: 0px 0px 10px 5px #ea830e;
}
100% {
-webkit-box-shadow: 0px 0px 0px 0px #ea830e;
box-shadow: 0px 0px 0px 0px #ea830e;
}
}
@-moz-keyframes testim-scale {
0% {
-moz-box-shadow: 0px 0px 0px 0px #eee;
box-shadow: 0px 0px 0px 0px #eee;
}
35% {
-moz-box-shadow: 0px 0px 10px 5px #eee;
box-shadow: 0px 0px 10px 5px #eee;
}
70% {
-moz-box-shadow: 0px 0px 10px 5px #ea830e;
box-shadow: 0px 0px 10px 5px #ea830e;
}
100% {
-moz-box-shadow: 0px 0px 0px 0px #ea830e;
box-shadow: 0px 0px 0px 0px #ea830e;
}
}
@-ms-keyframes testim-scale {
0% {
-ms-box-shadow: 0px 0px 0px 0px #eee;
box-shadow: 0px 0px 0px 0px #eee;
}
35% {
-ms-box-shadow: 0px 0px 10px 5px #eee;
box-shadow: 0px 0px 10px 5px #eee;
}
70% {
-ms-box-shadow: 0px 0px 10px 5px #ea830e;
box-shadow: 0px 0px 10px 5px #ea830e;
}
100% {
-ms-box-shadow: 0px 0px 0px 0px #ea830e;
box-shadow: 0px 0px 0px 0px #ea830e;
}
}
@-o-keyframes testim-scale {
0% {
-o-box-shadow: 0px 0px 0px 0px #eee;
box-shadow: 0px 0px 0px 0px #eee;
}
35% {
-o-box-shadow: 0px 0px 10px 5px #eee;
box-shadow: 0px 0px 10px 5px #eee;
}
70% {
-o-box-shadow: 0px 0px 10px 5px #ea830e;
box-shadow: 0px 0px 10px 5px #ea830e;
}
100% {
-o-box-shadow: 0px 0px 0px 0px #ea830e;
box-shadow: 0px 0px 0px 0px #ea830e;
}
}
@keyframes testim-scale {
0% {
box-shadow: 0px 0px 0px 0px #eee;
}
35% {
box-shadow: 0px 0px 10px 5px #eee;
}
70% {
box-shadow: 0px 0px 10px 5px #ea830e;
}
100% {
box-shadow: 0px 0px 0px 0px #ea830e;
}
}
@-webkit-keyframes testim-content-in {
from {
opacity: 0;
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
to {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@-moz-keyframes testim-content-in {
from {
opacity: 0;
-moz-transform: translateY(100%);
transform: translateY(100%);
}
to {
opacity: 1;
-moz-transform: translateY(0);
transform: translateY(0);
}
}
@-ms-keyframes testim-content-in {
from {
opacity: 0;
-ms-transform: translateY(100%);
transform: translateY(100%);
}
to {
opacity: 1;
-ms-transform: translateY(0);
transform: translateY(0);
}
}
@-o-keyframes testim-content-in {
from {
opacity: 0;
-o-transform: translateY(100%);
transform: translateY(100%);
}
to {
opacity: 1;
-o-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes testim-content-in {
from {
opacity: 0;
transform: translateY(100%);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@-webkit-keyframes testim-content-out {
from {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
to {
opacity: 0;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
}
@-moz-keyframes testim-content-out {
from {
opacity: 1;
-moz-transform: translateY(0);
transform: translateY(0);
}
to {
opacity: 0;
-moz-transform: translateY(-100%);
transform: translateY(-100%);
}
}
@-ms-keyframes testim-content-out {
from {
opacity: 1;
-ms-transform: translateY(0);
transform: translateY(0);
}
to {
opacity: 0;
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
}
@-o-keyframes testim-content-out {
from {
opacity: 1;
-o-transform: translateY(0);
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-100%);
transform: translateY(-100%);
}
}
@keyframes testim-content-out {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-100%);
}
}
@-webkit-keyframes testim-show {
from {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
to {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-moz-keyframes testim-show {
from {
opacity: 0;
-moz-transform: scale(0);
transform: scale(0);
}
to {
opacity: 1;
-moz-transform: scale(1);
transform: scale(1);
}
}
@-ms-keyframes testim-show {
from {
opacity: 0;
-ms-transform: scale(0);
transform: scale(0);
}
to {
opacity: 1;
-ms-transform: scale(1);
transform: scale(1);
}
}
@-o-keyframes testim-show {
from {
opacity: 0;
-o-transform: scale(0);
transform: scale(0);
}
to {
opacity: 1;
-o-transform: scale(1);
transform: scale(1);
}
}
@keyframes testim-show {
from {
opacity: 0;
transform: scale(0);
}
to {
opacity: 1;
transform: scale(1);
}
}
@-webkit-keyframes testim-hide {
from {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
to {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
}
@-moz-keyframes testim-hide {
from {
opacity: 1;
-moz-transform: scale(1);
transform: scale(1);
}
to {
opacity: 0;
-moz-transform: scale(0);
transform: scale(0);
}
}
@-ms-keyframes testim-hide {
from {
opacity: 1;
-ms-transform: scale(1);
transform: scale(1);
}
to {
opacity: 0;
-ms-transform: scale(0);
transform: scale(0);
}
}
@-o-keyframes testim-hide {
from {
opacity: 1;
-o-transform: scale(1);
transform: scale(1);
}
to {
opacity: 0;
-o-transform: scale(0);
transform: scale(0);
}
}
@keyframes testim-hide {
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(0);
}
}
@media all and (max-width: 300px) {
body {
font-size: 14px;
}
}
@media all and (max-width: 500px) {
.testim .arrow {
font-size: 1.5em;
}
.testim .cont div p {
line-height: 25px;
}
} <div class="container">
<section id="testim" class="testim">
<div class="testim-cover">
<div class="wrap">
<span id="right-arrow" class="arrow right fa fa-chevron-right"></span>
<span id="left-arrow" class="arrow left fa fa-chevron-left "></span>
<ul id="testim-dots" class="dots">
<li class="dot active"></li><!--
--><li class="dot"></li><!--
--><li class="dot"></li><!--
--><li class="dot"></li><!--
--><li class="dot"></li>
</ul>
<div id="testim-content" class="cont">
<div class="active">
<div class="img"><img src="https://in.bmscdn.com/iedb/artist/images/website/poster/large/kartik-aaryan-1045198-08-12-2017-06-34-11.jpg" alt=""></div>
<h2>Lorem P. Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
<div>
<div class="img"><img src="https://timesofindia.indiatimes.com/thumb/msid-75752690,width-800,height-600,resizemode-4/75752690.jpg" alt=""></div>
<h2>Mr. Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
<div>
<div class="img"><img src="https://p16.muscdn.com/img/musically-maliva-obj/1627333501517830~c5_720x720.jpeg" alt=""></div>
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
<div>
<div class="img"><img src="https://p16-sg-default.akamaized.net/aweme/1080x1080/tiktok-obj/1666413671597057.jpeg" alt=""></div>
<h2>Lorem De Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
<div>
<div class="img"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSKLJe1Lrz2N3ufVSwQokSJ79jGBbIptXuVnsdxMmNUlE14ohwpamp;usqp=CAU" alt=""></div>
<h2>Ms. Lorem R. Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
</div>
</div>
</div>
</section>
</div>
<script src="https://use.fontawesome.com/1744f3f671.js"></script> Комментарии:
1. Спасибо за ваш ответ и ваше драгоценное время, я хочу, чтобы слайдер с 5 изображениями с текстом среднее активное изображение было увеличено, как я прикрепил изображение