<!DOCTYPE html>
<head>
<style>
img { height: 100px; }
.orange-fade {
background: #black;
background: linear-gradient(135deg,gray 0,black 100%);
}
.pos-r {
position: relative!important;
}
.white {
background: #fff;
}
.text-white {
color: #fff!important;
}
.text-gray {
color: #363636;
}
.testimonial {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.separator {
width: 14%;
height: 3px;
margin: 1.2em auto 1em;
background: #bada55;
}
.one-slide {
border-radius: 3px;
margin-left: 1rem;
margin-right: 1rem;
font-size: 1.1rem;
height: 300px;
}
.one-slide img {
width: 60%;
}
.carousel-controls .control {
position: absolute;
cursor: pointer;
top: 56.4%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.prev {
left: -1.875rem;
}
.next {
right: -1.875rem;
}
.testimonial-carousel {
&.slick-initialized {
display: block;
}
.message {
width: 100%;
font-size: .9rem;
}
.icon {
width: 100%;
}
@media (max-width: 575px) {
.one-slide {
height: 200px;
}
img {
width: 40%;
}
}
}
</style>
</head>
<body>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet">
<link href="slider-boxes.scss" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"></script>
<script src="slider-boxes.js"></script>
<section class="orange-fade p-5 margin-top-xl pos-r">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h2 class="text-center font-weight-bold text-white">Your Title Here</h2>
<p></p>
<div class="mt-5 pos-r">
<div class="carousel-controls testimonial-carousel-controls">
<div class="control prev"><i class="fa fa-chevron-left text-white"> </i></div>
<div class="control next"><i class="fa fa-chevron-right text-white"> </i></div>
</div>
<div class="testimonial-carousel">
<div class="one-slide white">
<div class="testimonial w-100 h-100 p-3 text-center">
<div class="message text-center text-gray">Testimonial text</div>
<div class="separator"> </div>
<div class="icon"><img alt="blue flower" src="https://i.ibb.co/k8vTTyr/blue-flower.jpg" class="mx-auto"/></div>
</div>
</div>
<div class="one-slide white">
<div class="testimonial w-100 h-100 p-3 text-center">
<div class="message text-center text-gray">Testimonial text</div>
<div class="separator"> </div>
<div class="icon"><img alt="purple pink flower" src="https://i.ibb.co/b13yZDW/purplep-pink-flower.jpg" class="mx-auto"/></div>
</div>
</div>
<div class="one-slide white">
<div class="testimonial w-100 h-100 p-3 text-center">
<div class="message text-center text-gray">Testimonial text</div>
<div class="separator"> </div>
<div class="icon"><img alt="red purple flower" src="https://i.ibb.co/qWRCm29/red-purple-flower.jpg" class="mx-auto" /></div>
</div>
</div>
<div class="one-slide white">
<div class="testimonial w-100 h-100 p-3 text-center">
<div class="message text-center text-gray">Testimonial text</div>
<div class="separator"> </div>
<div class="icon"><img alt="flower field" src="https://i.ibb.co/c2sz99Z/flower-field.jpg" class="mx-auto" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
<script>
$(document).ready(function() {
$(".testimonial-carousel").slick({
infinite: !0,
slidesToShow: 4,
slidesToScroll: 1,
autoplay: !1,
arrows:true,
prevArrow: $(".testimonial-carousel-controls .prev"),
nextArrow: $(".testimonial-carousel-controls .next"),
responsive: [{
breakpoint: 1200,
settings: {
slidesToShow: 3
}
}, {
breakpoint: 992,
settings: {
slidesToShow: 2
}
}, {
breakpoint: 600,
settings: {
slidesToShow: 1
}
}]
});
});
</script>