Skip to content

Commit

Permalink
[C1] Testimonial with Swiper JS but the right and left side swtill wo…
Browse files Browse the repository at this point in the history 
…n't half
  • Loading branch information
@RazinSyakib43
RazinSyakib43 committed Mar 15, 2024
1 parent 7f74539 commit a349c51
Show file tree
Hide file tree
Showing 3 changed files with 431 additions and 104 deletions.
168 changes: 105 additions & 63 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,30 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Binar Car Rental (BCR)</title>

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

<!-- style.css -->
<link rel="stylesheet" href="style.css">

<style>
/* .swiper-button-next,
.swiper-button-prev,
.swiper-pagination {
display: block;
} */

.mySwiper {
overflow: visible;
margin-left: auto;
margin-right: auto
}
</style>
</head>

<body>
Expand Down Expand Up @@ -160,81 +181,77 @@ <h3 class="card-title">Sopir Profesional</h3>
<section class="container d-flex flex-column align-items-center">
<h2 class="testimonial__title">Testimonial</h2>
<p class="testimonial__description">Berbagai review positif dari para pelanggan kami</p>
<section id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
<section class="carousel-inner">
<section class="carousel-item active" data-bs-interval="10000">
<section class="testimonial__card card border-0">
<section class="testimonial__card-body card-body d-flex align-items-center justify-content-center">
<img src="./assets/images/img_testi2.png" class="testimonial__card-img" alt="">
<section class="testimonial__card-review">
<section>
<img src="./assets/icons/Star 1.png" class="testimonial__card-star" alt="">
<img src="./assets/icons/Star 1.png" class="testimonial__card-star" alt="">
<img src="./assets/icons/Star 1.png" class="testimonial__card-star" alt="">
<img src="./assets/icons/Star 1.png" class="testimonial__card-star" alt="">
<img src="./assets/icons/Star 1.png" class="testimonial__card-star" alt="">
</section>
<p class="testimonial__card-quote">“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod lorem ipsum dolor
sit amet, consectetur adipiscing elit, sed do eiusmod”</p>
<p class="testimonial__card-name">John Dee 32, Bromo</p>
</section>

<!-- Swiper -->
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<section class="testimonial__card card border-0">
<section class="testimonial__card-body card-body d-flex align-items-center justify-content-center">
<img src="./assets/images/img_testi2.png" class="testimonial__card-img" alt="">
<section class="testimonial__card-review">
<section>
<img src="./assets/icons/Star 1.png" class="testimonial__card-star" alt="">
<img src="./assets/icons/Star 1.png" class="testimonial__card-star" alt="">
<img src="./assets/icons/Star 1.png" class="testimonial__card-star" alt="">
<img src="./assets/icons/Star 1.png" class="testimonial__card-star" alt="">
<img src="./assets/icons/Star 1.png" class="testimonial__card-star" alt="">
</section>
<p class="testimonial__card-quote">“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod lorem ipsum dolor
sit amet, consectetur adipiscing elit, sed do eiusmod”</p>
<p class="testimonial__card-name">John Dee 32, Solo</p>
</section>
</section>
</section>
<section class="carousel-item" data-bs-interval="2000">
<section class="testimonial__card card border-0">
<section class="testimonial__card-body card-body d-flex align-items-center justify-content-center">
<img src="./assets/images/img_testi2.png" class="testimonial__card-img" alt="">
<section class="testimonial__card-review">
<section>
<img src="./assets/icons/Star 1.png" class="testimonial__card-star" alt="">
<img src="./assets/icons/Star 1.png" class="testimonial__card-star" alt="">
<img src="./assets/icons/Star 1.png" class="testimonial__card-star" alt="">
<img src="./assets/icons/Star 1.png" class="testimonial__card-star" alt="">
<img src="./assets/icons/Star 1.png" class="testimonial__card-star" alt="">
</section>
<p class="testimonial__card-quote">“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod lorem ipsum dolor
sit amet, consectetur adipiscing elit, sed do eiusmod”</p>
<p class="testimonial__card-name">John Dee 32, Bromo</p>
</div>
<div class="swiper-slide">
<section class="testimonial__card card border-0">
<section class="testimonial__card-body card-body d-flex align-items-center justify-content-center">
<img src="./assets/images/img_testi2.png" class="testimonial__card-img" alt="">
<section class="testimonial__card-review">
<section>
<img src="./assets/icons/Star 1.png" class="testimonial__card-star" alt="">
<img src="./assets/icons/Star 1.png" class="testimonial__card-star" alt="">
<img src="./assets/icons/Star 1.png" class="testimonial__card-star" alt="">
<img src="./assets/icons/Star 1.png" class="testimonial__card-star" alt="">
<img src="./assets/icons/Star 1.png" class="testimonial__card-star" alt="">
</section>
<p class="testimonial__card-quote">“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod lorem ipsum dolor
sit amet, consectetur adipiscing elit, sed do eiusmod”</p>
<p class="testimonial__card-name">John Dee 32, Bromo</p>
</section>
</section>
</section>
<section class="carousel-item">
<section class="testimonial__card card border-0">
<section class="testimonial__card-body card-body d-flex align-items-center justify-content-center">
<img src="./assets/images/img_testi2.png" class="testimonial__card-img" alt="">
<section class="testimonial__card-review">
<section>
<img src="./assets/icons/Star 1.png" class="testimonial__card-star" alt="">
<img src="./assets/icons/Star 1.png" class="testimonial__card-star" alt="">
<img src="./assets/icons/Star 1.png" class="testimonial__card-star" alt="">
<img src="./assets/icons/Star 1.png" class="testimonial__card-star" alt="">
<img src="./assets/icons/Star 1.png" class="testimonial__card-star" alt="">
</section>
<p class="testimonial__card-quote">“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod lorem ipsum dolor
sit amet, consectetur adipiscing elit, sed do eiusmod”</p>
<p class="testimonial__card-name">John Dee 32, Bromo</p>
</div>
<div class="swiper-slide">
<section class="testimonial__card card border-0">
<section class="testimonial__card-body card-body d-flex align-items-center justify-content-center">
<img src="./assets/images/img_testi2.png" class="testimonial__card-img" alt="">
<section class="testimonial__card-review">
<section>
<img src="./assets/icons/Star 1.png" class="testimonial__card-star" alt="">
<img src="./assets/icons/Star 1.png" class="testimonial__card-star" alt="">
<img src="./assets/icons/Star 1.png" class="testimonial__card-star" alt="">
<img src="./assets/icons/Star 1.png" class="testimonial__card-star" alt="">
<img src="./assets/icons/Star 1.png" class="testimonial__card-star" alt="">
</section>
<p class="testimonial__card-quote">“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod lorem ipsum dolor
sit amet, consectetur adipiscing elit, sed do eiusmod”</p>
<p class="testimonial__card-name">John Dee 32, Jakarta</p>
</section>
</section>
</section>
</section>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</section>
</section>
</div>
</div>

<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
</article>
<!-- End of Testimonial Section -->

Expand Down Expand Up @@ -353,10 +370,35 @@ <h2 class="accordion-header">
</section>
</article>
<!-- End of Frequently Asked Question (FAQ) Section -->

</main>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>

<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
loopedSlides: 3,
slidesPerView: 2.5,
watchSlidesVisibility: true,
loop: true,
pagination: {
el: ".swiper-pagination",
loop: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});

</script>
</body>

</html>
109 changes: 68 additions & 41 deletions owl carousel.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,26 +5,17 @@
<meta charset="utf-8" />
<title>Owl Carousel demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<!-- Owl Carousel CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">

<link rel="stylesheet" href="style.css">
<!-- Demo styles -->
<style>
.home-demo .item {
background: #ff3f4d;
}

.home-demo h2 {
color: #FFF;
text-align: center;
padding: 5rem 0;
margin: 0;
font-style: italic;
font-weight: 300;
}
</style>
</head>

Expand All @@ -34,45 +25,81 @@
<h3>Carousel</h3>
<div class="owl-carousel owl-theme">
<div class="item">
<h2>Swipe</h2>
</div>
<div class="item">
<h2>Drag</h2>
</div>
<div class="item">
<h2>Responsive</h2>
</div>
<div class="item">
<h2>CSS3</h2>
</div>
<div class="item">
<h2>Fast</h2>
<section class="testimonial__card card border-0">
<section class="testimonial__card-body card-body d-flex align-items-center justify-content-center">
<img src="./assets/images/img_testi2.png" class="testimonial__card-img" alt="">
<section class="testimonial__card-review">
<section>
<img src="./assets/icons/Star 1.png" class="testimonial__card-star" alt="">
<img src="./assets/icons/Star 1.png" class="testimonial__card-star" alt="">
<img src="./assets/icons/Star 1.png" class="testimonial__card-star" alt="">
<img src="./assets/icons/Star 1.png" class="testimonial__card-star" alt="">
<img src="./assets/icons/Star 1.png" class="testimonial__card-star" alt="">
</section>
<p class="testimonial__card-quote">“Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do
eiusmod lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod lorem
ipsum dolor
sit amet, consectetur adipiscing elit, sed do eiusmod”</p>
<p class="testimonial__card-name">John Dee 32, Jakarta</p>
</section>
</section>
</section>
</div>
<div class="item">
<h2>Easy</h2>
<section class="testimonial__card card border-0">
<section class="testimonial__card-body card-body d-flex align-items-center justify-content-center">
<img src="./assets/images/img_testi2.png" class="testimonial__card-img" alt="">
<section class="testimonial__card-review">
<section>
<img src="./assets/icons/Star 1.png" class="testimonial__card-star" alt="">
<img src="./assets/icons/Star 1.png" class="testimonial__card-star" alt="">
<img src="./assets/icons/Star 1.png" class="testimonial__card-star" alt="">
<img src="./assets/icons/Star 1.png" class="testimonial__card-star" alt="">
<img src="./assets/icons/Star 1.png" class="testimonial__card-star" alt="">
</section>
<p class="testimonial__card-quote">“Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do
eiusmod lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod lorem
ipsum dolor
sit amet, consectetur adipiscing elit, sed do eiusmod”</p>
<p class="testimonial__card-name">John Dee 32, Jakarta</p>
</section>
</section>
</section>
</div>
<div class="item">
<h2>Free</h2>
</div>
<div class="item">
<h2>Upgradable</h2>
</div>
<div class="item">
<h2>Tons of options</h2>
</div>
<div class="item">
<h2>Infinity</h2>
</div>
<div class="item">
<h2>Auto Width</h2>
<section class="testimonial__card card border-0">
<section class="testimonial__card-body card-body d-flex align-items-center justify-content-center">
<img src="./assets/images/img_testi2.png" class="testimonial__card-img" alt="">
<section class="testimonial__card-review">
<section>
<img src="./assets/icons/Star 1.png" class="testimonial__card-star" alt="">
<img src="./assets/icons/Star 1.png" class="testimonial__card-star" alt="">
<img src="./assets/icons/Star 1.png" class="testimonial__card-star" alt="">
<img src="./assets/icons/Star 1.png" class="testimonial__card-star" alt="">
<img src="./assets/icons/Star 1.png" class="testimonial__card-star" alt="">
</section>
<p class="testimonial__card-quote">“Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do
eiusmod lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod lorem
ipsum dolor
sit amet, consectetur adipiscing elit, sed do eiusmod”</p>
<p class="testimonial__card-name">John Dee 32, Jakarta</p>
</section>
</section>
</section>
</div>
</div>
</div>

<!-- Owl Carousel JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<!-- Initialize Swiper -->
<script>
$(function () {
Expand Down
Loading

0 comments on commit a349c51

Please sign in to comment.