HTML-CSS-JS How can I turn this into a 'text carousel'?
Question
I am trying to recreate a 'text carousel' without any help. I've currently made this (stretch it out, it's not yet responsive). Here is what I'm trying to recreate scroll down to the testimonials section. I've checked their site but they've done this with the use of Bootstrap, I'm trying to recreate it without, only with html, css and probably javascript.
I've check on codepen for text carousels but they are mostly with only one text field and I want to have at least two.
Thanks for helping me out.
PS: The .fa-angle-left and .fa-angle-right are from FontAwesome but I've quickly replaced them with an image from google.
2 answers
solution1
0 2017-05-23 17:04:55
As I can see, you are trying to learn to do it yourself and that's awesome! Keep the good work!
There's multiple ways to achieve this behavior. I won't write the code for you, but here are some steps for you to try and learn:
First, add more .tekstbalonvolledig divs so you can test it.
Second the CSS part:
1 - Add a .wrapper div around .tekstbalonvolledig divs with 1000px width
2 - Add overflow: hidden to .overlaycontainer
Now the JS part:
1 - Create a function that animates a margin-left of -500px on the .wrapper
2 - Add a click event listener to you .fa-angle-left to run this function
Of course there's a lot more things to implement on your carousel, but I hope this will help you to begin :)
solution2
0 2017-05-23 17:35:03
Below is the code for carousel..
Below is HTML code
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
</head>
<section id="carousel">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="quote"><i class="fa fa-quote-left fa-4x"></i></div>
<div class="carousel slide" id="fade-quote-carousel" data-ride="carousel" data-interval="3000">
<!-- Carousel indicators -->
<ol class="carousel-indicators">
<li data-target="#fade-quote-carousel" data-slide-to="0"></li>
<li data-target="#fade-quote-carousel" data-slide-to="1"></li>
<li data-target="#fade-quote-carousel" data-slide-to="2" class="active"></li>
<li data-target="#fade-quote-carousel" data-slide-to="3"></li>
<li data-target="#fade-quote-carousel" data-slide-to="4"></li>
<li data-target="#fade-quote-carousel" data-slide-to="5"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item">
<div class="profile-circle" style="background-color: rgba(0,0,0,.2);"></div>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, veritatis nulla eum laudantium totam tempore optio doloremque laboriosam quas, quos eaque molestias odio aut eius animi. Impedit temporibus nisi accusamus.</p>
</blockquote>
</div>
<div class="item">
<div class="profile-circle" style="background-color: rgba(77,5,51,.2);"></div>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, veritatis nulla eum laudantium totam tempore optio doloremque laboriosam quas, quos eaque molestias odio aut eius animi. Impedit temporibus nisi accusamus.</p>
</blockquote>
</div>
<div class="active item">
<div class="profile-circle" style="background-color: rgba(145,169,216,.2);"></div>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, veritatis nulla eum laudantium totam tempore optio doloremque laboriosam quas, quos eaque molestias odio aut eius animi. Impedit temporibus nisi accusamus.</p>
</blockquote>
</div>
<div class="item">
<div class="profile-circle" style="background-color: rgba(77,5,51,.2);"></div>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, veritatis nulla eum laudantium totam tempore optio doloremque laboriosam quas, quos eaque molestias odio aut eius animi. Impedit temporibus nisi accusamus.</p>
</blockquote>
</div>
<div class="item">
<div class="profile-circle" style="background-color: rgba(77,5,51,.2);"></div>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, veritatis nulla eum laudantium totam tempore optio doloremque laboriosam quas, quos eaque molestias odio aut eius animi. Impedit temporibus nisi accusamus.</p>
</blockquote>
</div>
<div class="item">
<div class="profile-circle" style="background-color: rgba(77,5,51,.2);"></div>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, veritatis nulla eum laudantium totam tempore optio doloremque laboriosam quas, quos eaque molestias odio aut eius animi. Impedit temporibus nisi accusamus.</p>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Below is the css
section {
padding-top: 100px;
padding-bottom: 100px;
}
.quote {
color: rgba(0,0,0,.1);
text-align: center;
margin-bottom: 30px;
}
#fade-quote-carousel.carousel {
padding-bottom: 60px;
}
#fade-quote-carousel.carousel .carousel-inner .item {
opacity: 0;
-webkit-transition-property: opacity;
-ms-transition-property: opacity;
transition-property: opacity;
}
#fade-quote-carousel.carousel .carousel-inner .active {
opacity: 1;
-webkit-transition-property: opacity;
-ms-transition-property: opacity;
transition-property: opacity;
}
#fade-quote-carousel.carousel .carousel-indicators {
bottom: 10px;
}
#fade-quote-carousel.carousel .carousel-indicators > li {
background-color: #e84a64;
border: none;
}
#fade-quote-carousel blockquote {
text-align: center;
border: none;
}
#fade-quote-carousel .profile-circle {
width: 100px;
height: 100px;
margin: 0 auto;
border-radius: 100px;
}
Below is the fiddle link https://bootsnipp.com/snippets/featured/testimonial-carousel
Dont forget to include bootstrap and jquery library files
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.