Bootstrap Carousel with Tabbed Navigation

HTML, CSS, and JavaScript code:

1. index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Carousel with Tabbed Navigation</title>

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Oswald:300,400|Roboto:300,400,700" rel="stylesheet">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <!-- Bootstrap JS -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!-- Custom Styles -->
    <link href="styles.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div id="myCarousel" class="carousel slide" data-ride="carousel">
                    <!-- Carousel items -->
                    <div class="carousel-inner">
                        <div class="item active">
                            <img src="image/webdesign1.jpg" alt="HTML">
                            <div class="carousel-caption">
                                <h3>HTML</h3>
                                <p>HTML stands for Hyper Text Markup Language, a standard markup language for web pages.</p>
                            </div>
                        </div> 
                        <div class="item">
                            <img src="image/webdesign2.jpg" alt="CSS">
                            <div class="carousel-caption">
                                <h3>CSS</h3>
                                <p>CSS is a language that describes the style of an HTML document, from basic to advanced styling.</p>
                            </div>
                        </div>
                        <div class="item">
                            <img src="image/webdesign3.jpg" alt="PHP">
                            <div class="carousel-caption">
                                <h3>PHP</h3>
                                <p>PHP is a server-side scripting language used for dynamic and interactive web pages.</p>
                            </div>
                        </div>
                        <div class="item">
                            <img src="image/webdesign4.jpg" alt="AJAX">
                            <div class="carousel-caption">
                                <h3>AJAX</h3>
                                <p>AJAX allows you to update a web page without reloading the entire page.</p>
                            </div>
                        </div>
                    </div>

                    <!-- Carousel Navigation Tabs -->
                    <ul class="nav nav-pills nav-justified">
                        <li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#"><strong>HTML</strong> Learn HTML for websites</a></li>
                        <li data-target="#myCarousel" data-slide-to="1"><a href="#"><strong>CSS</strong> Learn CSS for websites</a></li>
                        <li data-target="#myCarousel" data-slide-to="2"><a href="#"><strong>PHP</strong> Learn PHP for websites</a></li>
                        <li data-target="#myCarousel" data-slide-to="3"><a href="#"><strong>AJAX</strong> Learn AJAX for websites</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- Custom JavaScript -->
    <script src="javascript.js"></script>
</body>
</html>

2. styles.css

body {
    background-image: url(image/webdesign.jpg);
    background-size: cover;
    background-position: center;
}

.carousel {
    margin: 30px 0;
    background: #ccc;
}

.carousel .item {
    text-align: center;
    overflow: hidden;
    height: 475px;
}

.carousel .item img {
    max-width: 100%;
    margin: 0 auto;
}

.carousel .carousel-control {
    width: 50px;
    height: 50px;
    background: #000;
    margin: auto 0;
    opacity: 0.8;
}

.carousel .carousel-control:hover {
    opacity: 0.9;
}

.carousel .carousel-control i {
    font-size: 41px;
    margin-top: 3px;
}

.carousel-caption h3, .carousel-caption p {
    color: #fff;
    display: inline-block;
    font-family: 'Oswald', sans-serif;
    text-shadow: none;
    margin-bottom: 20px;
}

.carousel-caption h3 {
    background: rgba(175, 86, 86, 0.781);
    padding: 12px 24px;
    font-size: 40px;
    text-transform: uppercase;
}

.carousel-caption p {
    background: #0b65cca1;
    padding: 10px 20px;
    font-size: 20px;
    font-weight: 300;
}

.carousel-indicators li, .carousel-indicators li.active {
    margin-left: 4px;
    margin-right: 4px;
}

.carousel-indicators li.active {
    background: #20b0b9;
    border-color: #20b0b9;
}

.carousel .nav {
    background: #eee;
}

.carousel .nav a {
    color: #333;
    border-radius: 0;
    font-size: 85%;
    padding: 10px 16px;
    background: transparent;
}

.carousel .nav .nav-item.active a {
    color: #fff;
    background: #ff0000;
}

.carousel .nav strong {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 110%;
    text-transform: uppercase;
}

3. javascript.js

$(document).ready(function(){
    // Highlight the active nav item when clicking on carousel navigation
    var clickEvent = false;

    // When a tab is clicked
    $("#myCarousel").on("click", ".nav a", function(){
        clickEvent = true;
        $(this).parent().siblings().removeClass("active");
        $(this).parent().addClass("active");
    })
    .on("slid.bs.carousel", function(e){
        if(!clickEvent){
            var itemIndex = $(e.relatedTarget).index();
            var targetNavItem = $(".nav li[data-slide-to='" + itemIndex + "']");
            $(".nav li").not(targetNavItem).removeClass("active");
            targetNavItem.addClass("active");
        }
        clickEvent = false;
    });
});

Changes Made:

Improved HTML Structure:
- Updated the titles and descriptions in the carousel to match the correct context.
- Kept the <ul> navigation pills and aligned them data-slide-to with the correct carousel items.
Refined CSS:
- Added background-size and position for the body to ensure the background image covers the screen.
- Made some tweaks to the carousel and carousel-item styling for better display and alignment.
- Enhanced the navigation tab and carousel controls to ensure clarity and usability.
Optimized JavaScript:
- Ensured the the slid.bs.carousel event works properly by updating the navigation pill's active class based on carousel slide changes.
- Improved the click event handling for the navigation items.

Souy Soeng

Bootstrap Carousel with Tabbed Navigation

1. index.html

2. styles.css

3. javascript.js

Changes Made:

Post a Comment

Souy Soeng