问题描述
嘿，我想创建类似于图像的响应式推荐滑块，但不使用 swiperjs 或任何东西。只是纯 html css javascript，如果有人可以帮助我，请
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
<style>
:root {
--first_color: #15241c;
--second-color: #09382f;
--third-color: #FF882E;
--fourth-color:#E55E2E;
--fifth-color:#F8F1E0;
--sixth-color : #EC9937;
}
.Testimonials {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
max-width: 100%;
margin: 40px 0px;
}
.Testimonials_title h2 {
font-size: 42px;
letter-spacing: -2px;
font-weight: 700;
letter-spacing: 0;
margin-bottom: 30px;
text-align: center;
color: var(--first_color);
}
.Testimonials_title>p {
max-width: 900px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 40px;
font-weight: 300;
text-align: center;
}
.testimonials_container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
position: relative;
}
.testimonials_container_center {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.testimonials_content {
position: relative;
transition: all .3s ease-in-out;
transform: scale(0.9);
opacity: 0.9;
}
.testimonials_avatar {
position: absolute;
left: 50%;
top: -30px;
width: 90px;
height: 90px;
margin-left: -45px;
z-index: 1;
}
.testimonials_avatar img {
width: 90px;
height: 90px;
border-radius: 100%;
border: 6px solid #fff;
Box-shadow: 0 9px 26px rgba(58,87,135,0.1);
}
.testimonials_text {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 75px 50px 75px;
overflow: hidden;
background: var(--third-color);
border: 1ps solid #f1f1f1;
border-radius: 10px;
transition: all .3s ease-in-out;
}
.testimonials_text_after {
font-style: normal;
font-weight: normal;
text-decoration: inherit;
position: absolute;
color: var(--fifth-color);
opacity: .3;
font-size: 35px;
transition: all 400ms linear;
bottom: 25px;
right: 30px;
}
.testimonials_text_before {
font-style: normal;
font-weight: normal;
text-decoration: inherit;
position: absolute;
color: var(--fifth-color);
opacity: .3;
font-size: 35px;
transition: all 400ms linear;
top: 25px;
left: 30px;
}
.testimonials_text p {
color: var(--second-color);
font-size: 14px;
font-family: Georgia,"Times New Roman",Times,serif;
font-style: italic;
line-height: 24px;
padding-bottom: 10px;
font-weight: 500;
}
.testimonials_information h3 {
font-weight: 600;
color: var(--second-color);
;
font-size: 18px;
}
.testimonials_information h4 {
font-weight: 400;
font-size: 12px;
padding-top: 6px;
color: var(--second-color);
;
}
.testimonials_container_center .active {
opacity: 1;
transform: scale(1.0);
width: 100%;
flex-grow: 6;
}
.testimonials_container_center .active .testimonials_text {
background: var(--fourth-color);
Box-shadow: 0 9px 26px rgba(58,0.1);
}
.listing-carousel-button {
position: relative;
width: 80px;
height: 50px;
z-index: 1;
cursor: pointer;
background: var(--second-color);
Box-shadow: 0 9px 26px rgba(58,0.45);
transition: all 200ms linear;
outline: none;
}
.listing-carousel-button.listing-carousel-button-next {
padding-right: 20px;
border-radius: 60px 0 0 60px;
}
.listing-carousel-button.listing-carousel-button-prev {
padding-left: 20px;
border-radius: 0 60px 60px 0;
}
.listing-carousel-button.listing-carousel-button-next:hover {
right: -15px;
background: rgba(6,27,65,0.4);
}
.listing-carousel-button.listing-carousel-button-prev:hover {
left: -15px;
background: rgba(6,0.4);
}
</style>
</head>
<body>
<section id="Testimonials">
<div class="Testimonials_top">
<div class="Testimonials_title">
<h2>Testimonials</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="Testimonials_bottom">
<div class="testimonials_container">
<div class="testimonials_container_left">
<div class="listing-carousel-button listing-carousel-button-prev"><i class="fa fa-caret-left"
style="color: #fff"></i></div>
</div>
<div class="testimonials_container_center">
<div class="testimonials_content">
<div class="testimonials_avatar">
<img src="61784903_2448694432083814_109523087682174976_n.jpg" alt="">
</div>
<div class="testimonials_text_before"><i class="fa fa-quote-right"></i></div>
<div class="testimonials_text">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s,when an
unkNown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<div class="testimonials_information">
<h3>John Doe</h3>
<h4>Owner</h4>
</div>
</div>
<div class="testimonials_text_after"><i class="fa fa-quote-left"></i></div>
</div>
<div class="testimonials_content active">
<div class="testimonials_avatar">
<img src="144937396_125411896111709_8005138515258577341_n.jpg" alt="">
</div>
<div class="testimonials_text_before"><i class="fa fa-quote-right"></i></div>
<div class="testimonials_text">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s,when an
unkNown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<div class="testimonials_information">
<h3>John Doe</h3>
<h4>Owner</h4>
</div>
</div>
<div class="testimonials_text_after"><i class="fa fa-quote-left"></i></div>
</div>
<div class="testimonials_content">
<div class="testimonials_avatar">
<img src="144739297_237956884645857_999009321808421704_n.jpg" alt="">
</div>
<div class="testimonials_text_before"><i class="fa fa-quote-right"></i></div>
<div class="testimonials_text">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s,when an
unkNown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<div class="testimonials_information">
<h3>John Doe</h3>
<h4>Owner</h4>
</div>
</div>
<div class="testimonials_text_after"><i class="fa fa-quote-left"></i></div>
</div>
</div>
<div class="testimonials_container_right">
<div class="listing-carousel-button listing-carousel-button-next"><i class="fa fa-caret-right"
style="color: #fff"></i></div>
</div>
</div>
</div>
</section>
</body>
</html>
如果有人可以帮忙，请在不使用纯 html css javascript 的情况下创建类似图像的内容，并在底部添加导航底部
解决方法
您可以使用纯 HTML、CSS、JavaScript 创建响应式推荐滑块。
只需根据您的滑块结构实现它：
在此处查看工作示例：https://jsfiddle.net/Hamzailyas434/gcwxf1pt/6/
// Slider
const slider = function () {
const slides = document.querySelectorAll('.slide');
const btnLeft = document.querySelector('.slider__btn--left');
const btnRight = document.querySelector('.slider__btn--right');
const dotContainer = document.querySelector('.dots');
let curSlide = 0;
const maxSlide = slides.length;
// Functions
const createDots = function () {
slides.forEach(function (_,i) {
dotContainer.insertAdjacentHTML(
'beforeend',`<button class="dots__dot" data-slide="${i}"></button>`
);
});
};
const activateDot = function (slide) {
document
.querySelectorAll('.dots__dot')
.forEach(dot => dot.classList.remove('dots__dot--active'));
document
.querySelector(`.dots__dot[data-slide="${slide}"]`)
.classList.add('dots__dot--active');
};
const goToSlide = function (slide) {
slides.forEach(
(s,i) => (s.style.transform = `translateX(${100 * (i - slide)}%)`)
);
};
// Next slide
const nextSlide = function () {
if (curSlide === maxSlide - 1) {
curSlide = 0;
} else {
curSlide++;
}
goToSlide(curSlide);
activateDot(curSlide);
};
const prevSlide = function () {
if (curSlide === 0) {
curSlide = maxSlide - 1;
} else {
curSlide--;
}
goToSlide(curSlide);
activateDot(curSlide);
};
const init = function () {
goToSlide(0);
createDots();
activateDot(0);
};
init();
// Event handlers
btnRight.addEventListener('click',nextSlide);
btnLeft.addEventListener('click',prevSlide);
document.addEventListener('keydown',function (e) {
if (e.key === 'ArrowLeft') prevSlide();
e.key === 'ArrowRight' && nextSlide();
});
dotContainer.addEventListener('click',function (e) {
if (e.target.classList.contains('dots__dot')) {
const { slide } = e.target.dataset;
goToSlide(slide);
activateDot(slide);
}
});
};
slider();* {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%;
box-sizing: border-box;
}
body {
font-family: 'Poppins',sans-serif;
font-weight: 300;
color: #444;
line-height: 1.9;
background-color: #f3f3f3;
}
/* SLIDER */
.slider {
max-width: 100rem;
height: 50rem;
margin: 0 auto;
position: relative;
/* IN THE END */
overflow: hidden;
}
.slide {
position: absolute;
top: 0;
width: 100%;
height: 50rem;
display: flex;
align-items: center;
justify-content: center;
/* THIS creates the animation! */
transition: transform 1s;
}
.slide > img {
/* Only for images that have different size than slide */
width: 100%;
height: 100%;
object-fit: cover;
}
.slider__btn {
position: absolute;
top: 50%;
z-index: 10;
border: none;
background: rgba(255,255,0.7);
font-family: inherit;
color: #333;
border-radius: 50%;
height: 5.5rem;
width: 5.5rem;
font-size: 3.25rem;
cursor: pointer;
}
.slider__btn--left {
left: 6%;
transform: translate(-50%,-50%);
}
.slider__btn--right {
right: 6%;
transform: translate(50%,-50%);
}
.dots {
position: absolute;
bottom: 5%;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.dots__dot {
border: none;
background-color: #b9b9b9;
opacity: 0.7;
height: 1rem;
width: 1rem;
border-radius: 50%;
margin-right: 1.75rem;
cursor: pointer;
transition: all 0.5s;
/* Only necessary when overlying images */
/* box-shadow: 0 0.6rem 1.5rem rgba(0,0.7); */
}
.dots__dot:last-child {
margin: 0;
}
.dots__dot--active {
/* background-color: #fff; */
background-color: #888;
opacity: 1;
}
/* TESTIMONIALS */
.testimonial {
width: 65%;
position: relative;
}
.testimonial::before {
content: '\201C';
position: absolute;
top: -5.7rem;
left: -6.8rem;
line-height: 1;
font-size: 20rem;
font-family: inherit;
color: var(--color-primary);
z-index: -1;
}
.testimonial__header {
font-size: 2.25rem;
font-weight: 500;
margin-bottom: 1.5rem;
}
.testimonial__text {
font-size: 1.7rem;
margin-bottom: 3.5rem;
color: #666;
}
.testimonial__author {
margin-left: 3rem;
font-style: normal;
display: grid;
grid-template-columns: 6.5rem 1fr;
column-gap: 2rem;
}
.testimonial__photo {
grid-row: 1 / span 2;
width: 6.5rem;
border-radius: 50%;
}
.testimonial__name {
font-size: 1.7rem;
font-weight: 500;
align-self: end;
margin: 0;
}
.testimonial__location {
font-size: 1.5rem;
}
.section__title--testimonials {
margin-bottom: 4rem;
} <section class="section" id="section--3">
<div class="slider">
<div class="slide slide--1">
<div class="testimonial">
<h5 class="testimonial__header">Best financial decision ever!</h5>
<blockquote class="testimonial__text">
Lorem ipsum dolor sit,amet consectetur adipisicing elit.
Accusantium quas quisquam non? Quas voluptate nulla minima
deleniti optio ullam nesciunt,numquam corporis et asperiores
laboriosam sunt,praesentium suscipit blanditiis. Necessitatibus
id alias reiciendis,perferendis facere pariatur dolore veniam
autem esse non voluptatem saepe provident nihil molestiae.
</blockquote>
<address class="testimonial__author">
<img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dXNlcnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80" alt="" class="testimonial__photo" />
<h6 class="testimonial__name">Aarav Lynn</h6>
<p class="testimonial__location">San Francisco,USA</p>
</address>
</div>
</div>
<div class="slide slide--2">
<div class="testimonial">
<h5 class="testimonial__header">
The last step to becoming a complete minimalist
</h5>
<blockquote class="testimonial__text">
Quisquam itaque deserunt ullam,quia ea repellendus provident,ducimus neque ipsam modi voluptatibus doloremque,corrupti
laborum. Incidunt numquam perferendis veritatis neque repellendus.
Lorem,ipsum dolor sit amet consectetur adipisicing elit. Illo
deserunt exercitationem deleniti.
</blockquote>
<address class="testimonial__author">
<img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dXNlcnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80" alt="" class="testimonial__photo" />
<h6 class="testimonial__name">Miyah Miles</h6>
<p class="testimonial__location">London,UK</p>
</address>
</div>
</div>
<div class="slide slide--3">
<div class="testimonial">
<h5 class="testimonial__header">
Finally free from old-school banks
</h5>
<blockquote class="testimonial__text">
Debitis,nihil sit minus suscipit magni aperiam vel tenetur
incidunt commodi architecto numquam omnis nulla autem,necessitatibus blanditiis modi similique quidem. Odio aliquam
culpa dicta beatae quod maiores ipsa minus consequatur error sunt,deleniti saepe aliquid quos inventore sequi. Necessitatibus id
alias reiciendis,perferendis facere.
</blockquote>
<address class="testimonial__author">
<img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dXNlcnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80" alt="" class="testimonial__photo" />
<h6 class="testimonial__name">Francisco Gomes</h6>
<p class="testimonial__location">Lisbon,Portugal</p>
</address>
</div>
</div>
<!-- <div class="slide"><img src="img/img-1.jpg" alt="Photo 1" /></div>
<div class="slide"><img src="img/img-2.jpg" alt="Photo 2" /></div>
<div class="slide"><img src="img/img-3.jpg" alt="Photo 3" /></div>
<div class="slide"><img src="img/img-4.jpg" alt="Photo 4" /></div> -->
<button class="slider__btn slider__btn--left">←</button>
<button class="slider__btn slider__btn--right">→</button>
<div class="dots"></div>
</div>
</section>