Search code examples
javascripthtmlcssfrontendcarousel

Owl-Carousel Slideshow on Website not appear as single item

I've been trying to fix this error by setting the Js up like the Items, the loops or else and also i try to edit the container in the CSS or even the slider-items but all seems not working out. since it's ended up showing all the list instead one by one. So, as the result, it stretched the website up.

here's my code :

$(document).ready(function() {

    //for testimonial
    var owl = $('.owl-testmonial');
    owl.owlCarousel({
        items: 1,
        loop: true,
        nav: true,
        margin: 10,
        autoplay: true,
        autoplayTimeout: 2500,
        autoplayHoverPause: true
    });
});
body {
    font-family: Arial, sans-serif;
    margin: 0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

.testmonial {
    background-image: url(images/testimonial-bg.jpg);
    position: relative;
    background-repeat: no-repeat;
}

.testmonial:after {
    content: "";
    background: #1baaba;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: .6;
    z-index: 1;
}

.owl-wrapper {
    padding: 80px 20px;
    z-index: 999;
    position: relative;
}

.owl-testmonial {
    background: #FFF;
    max-width: 400px;
    margin: 0 auto;
    padding: 40px 25px;
    position: unset;
}

.owl-testmonial:before {
    content: "\f10d";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    text-align: center;
    display: block;
    font-size: 92px;
    color: #e7e7e7;
    margin-top: -106px;
}

.owl-testmonial .owl-prev {
    position: absolute;
    left: 0;
    top: 45%;
    font-size: 36px !important;
    border: 1px solid #FFF !important;
    width: 33px !important;
    height: 36px !important;
    line-height: 17px !important;
    color: #FFF;
}

.owl-testmonial .owl-next {
    position: absolute;
    right: 0;
    top: 45%;
    font-size: 36px !important;
    border: 1px solid #FFF !important;
    width: 33px !important;
    height: 36px !important;
    color: #FFF;
    line-height: 17px !important;
}

nav {
    overflow: hidden;
    background-color: #333;
}

nav.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}

nav ul {
    display: flex;
    list-style: none;
    margin: 0;
}

nav li {
    margin: 0 30px;
}

nav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

nav a:hover {
    background-color: #ffeb3b;
    color: black;
}

a.active {
    background-color: #2196f3;
    color: white;
}

.content {
    padding: 20px;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}

.sticky+.content {
    padding-top: 60px;
}

.benefit-card,
.product,
.testimony,
.news-item,
.suggestion-box {
    background-color: #fff;
    width: 30%;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    float: left;
}

input[type="text"],
input[type="email"],
input[type="tel"] {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border-radius: 10px;
    border: 1px solid #ccc;
}

button[type="submit"] {
    width: 100%;
    padding: 10px;
    background-color: #ffeb3b;
    color: #2196f3;
    border-radius: 10px;
    border: 1px solid #2196f3;
    margin-top: 20px;
    cursor: pointer;
}

.office-map {
    margin-top: 50px;
}


/* Responsive styles */

@media screen and (max-width: 992px) {
    nav li {
        margin: 0 10px;
    }
    .benefit-card,
    .product,
    .testimony,
    .news-item,
    .suggestion-box {
        width: 80%;
    }
}

@media screen and (max-width: 768px) {
    header {
        height: 60vh;
    }
    nav {
        top: 60vh;
    }
    .benefit-card,
    .product,
    .testimony,
    .news-item,
    .suggestion-box {
        width: 90%;
    }
}

@media screen and (max-width: 576px) {
    header {
        height: 40vh;
    }
    nav {
        top: 40vh;
    }
    .benefit-card,
    .product,
    .testimony,
    .news-item,
    .suggestion-box {
        width: 95%;
    }
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Add JS for owl carousel -->
    <link rel="stylesheet" href="fontawesome/css/all.min.css">
    <link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
    <link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">
    <script src="main.js"></script>
    <link rel="stylesheet" href="style.css">
    <title>My Homepage</title>
</head>

<body>
    <div class="testmonial">
        <div class="container">
            <div class="owl-wrapper">
                <div class="owl-carousel owl-testmonial">
                    <div class="slide-item">
                        <img src="testimony/slider1585663811.png" alt="Slide 1">
                    </div>

                    <div class="slide-item">

                        <img src="testimony/slider1589942091.png" alt="Slide 2">
                    </div>
                    <div class="slide-item">
                        <img src="testimony/slider1590030001.png" alt="Slide 3">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 7 items sticky menu bar -->
    <nav id="navbar">
        <ul>
            <li><a class="active" href="#home">Home</a></li>
            <li><a href="#about-us">About Us</a></li>
            <li><a href="#tabungan">Tabungan</a></li>
            <li><a href="#kredit">Kredit</a></li>
            <li><a href="#deposito">Deposito</a></li>
            <li><a href="#berita">Berita</a></li>
            <li><a href="#pengajuan-kredit">Pengajuan Kredit</a></li>
        </ul>
    </nav>
    <main class="content">
        <!-- 3 static benefits -->
        <section class="benefits">
            <div class="card">
                <h3>Benefit 1</h3>
                <p>Description</p>
            </div>
            <div class="card">
                <h3>Benefit 2</h3>
                <p>Description</p>
            </div>
            <div class="card">
                <h3>Benefit 3</h3>
                <p>Description</p>
            </div>
        </section>

        <!-- 3 types of product -->
        <section class="products">
            <h2>Products</h2>
            <ul>
                <li>Product 1</li>
                <li>Product 2</li>
                <li>Product 3</li>
            </ul>
        </section>

        <!-- ID tracking -->
        <section class="id-tracking">
            <h2>ID Tracking</h2>
            <p>Description</p>
        </section>

        <!-- 3 dynamic testimonies -->
        <section class="testimonies">
            <h2>Testimonies</h2>
            <div class="owl-carousel owl-theme">
                <div class="testimony-1">Testimony 1</div>
                <div class="testimony-2">Testimony 2</div>
                <div class="testimony-3">Testimony 3</div>
            </div>
        </section>

        <!-- 4 dynamic slider of news -->
        <section class="news">
            <h2>News</h2>
            <div class="owl-carousel owl-theme">
                <div class="news-1">News 1</div>
                <div class="news-2">News 2</div>
                <div class="news-3">News 3</div>
                <div class="news-4">News 4</div>
            </div>
        </section>

        <!-- suggestion box -->
        <section class="suggestion-box">
            <h2>Suggestion Box</h2>
            <form action="#">
                <div>
                    <label for="name">Name:</label>
                    <input type="text" id="name" name="name">
                </div>
                <div>
                    <label for="phone-number">Phone Number:</label>
                    <input type="text" id="phone-number" name="phone-number">
                </div>
                <div>
                    <label for="email">Email:</label>
                    <input type="email" id="email" name="email">
                </div>
                <button type="submit">Submit</button>
            </form>
        </section>

        <!-- static map to the office -->
        <section class="map">
            <h2>Map to the Office</h2>
            <img src="map.jpg" alt="Map to the Office">
        </section>
    </main>
    <script src="jquery.min.js"></script>
    <script src="owlcarousel/owl.carousel.min.js"></script>
    <script>
        window.onscroll = function() {
            myFunction()
        };

        var navbar = document.getElementById("navbar");
        var sticky = navbar.offsetTop;

        function myFunction() {
            if (window.pageYOffset >= sticky) {
                navbar.classList.add("sticky")
            } else {
                navbar.classList.remove("sticky");
            }
        }
    </script>

</body>

</html>

The Error

Solution

  • Use the tried and true troubleshooting technique for isolating a problem. Save your code. Then remove everything unrelated to the carousel and see if it works. It does! (run the snippet below). Now add back your code in sections until it stops working, then you’ll know where the problem is.

    $(document).ready(function() {

    //for testimonial
    var owl = $('.owl-testmonial');
    owl.owlCarousel({
        items: 1,
        loop: true,
        nav: true,
        margin: 10,
        autoplay: true,
        autoplayTimeout: 2500,
        autoplayHoverPause: true
    });
});
    body {
    font-family: Arial, sans-serif;
    margin: 0;
}

.owl-testmonial {
    background: #FFF;
    max-width: 400px;
    margin: 0 auto;
    padding: 40px 25px;
    position: unset;
}

.owl-testmonial .owl-prev {
    position: absolute;
    left: 0;
    top: 45%;
    font-size: 36px !important;
    border: 1px solid #FFF !important;
    width: 33px !important;
    height: 36px !important;
    line-height: 17px !important;
    color: #FFF;
}

.owl-testmonial .owl-next {
    position: absolute;
    right: 0;
    top: 45%;
    font-size: 36px !important;
    border: 1px solid #FFF !important;
    width: 33px !important;
    height: 36px !important;
    color: #FFF;
    line-height: 17px !important;
}
    <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>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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.css">
</head>

<body>
  <div class="owl-carousel owl-testmonial">
    <div class="slide-item">
      <img src="https://shotkit.com/wp-content/uploads/2020/08/night-landscape-photography-featured.jpg" alt="Slide 1">
    </div>

    <div class="slide-item">
      <img src="https://llandscapes-10674.kxcdn.com/wp-content/uploads/2019/07/lighting.jpg" alt="Slide 2">
    </div>

    <div class="slide-item">
      <img src="https://img.freepik.com/free-vector/nature-scene-with-river-hills-forest-mountain-landscape-flat-cartoon-style-illustration_1150-37326.jpg" alt="Slide 3">
    </div>
  </div>
</body>