Bootstrap Elegant Image Slider | CSS Bootstrap

Bootstrap Elegant Image Slider | CSS Bootstrap


index.html, styles.css, and minor adjustments:

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 Elegant Image Slider</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 rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2 m-auto"> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Carousel indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Wrapper for carousel items --> <div class="carousel-inner"> <div class="item active"> <img src="image/webdesign1.jpg" alt="Image 1"> </div> <div class="item"> <img src="image/webdesign2.jpg" alt="Image 2"> </div> <div class="item"> <img src="image/webdesign3.jpg" alt="Image 3"> </div> </div> <!-- Carousel controls --> <a class="carousel-control left carousel-control-prev" href="#myCarousel" data-slide="prev"> <span><i class="fa fa-angle-left"></i></span> </a> <a class="carousel-control right carousel-control-next" href="#myCarousel" data-slide="next"> <span><i class="fa fa-angle-right"></i></span> </a> </div> </div> </div> </div> </body> </html>

2. styles.css

body { background-color: rgb(87, 193, 207); } .carousel { margin: 25px 0 50px; background: #fff; position: relative; padding: 8px; box-shadow: 0 0 1px rgba(0, 0, 0, 0.3); } .carousel:before, .carousel:after { z-index: -1; position: absolute; content: ""; bottom: 15px; left: 10px; width: 50%; top: 80%; max-width: 400px; background: rgba(0, 0, 0, 0.7); box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7); transform: rotate(-3deg); } .carousel:after { transform: rotate(3deg); right: 10px; left: auto; } .carousel .item { text-align: center; min-height: 314px; } .carousel .item img { max-width: 100%; margin: 0 auto; } .carousel .carousel-control { width: 27px; height: 54px; overflow: hidden; opacity: 1; margin: auto 0; background: none; text-shadow: none; } .carousel .carousel-control span { width: 54px; height: 54px; display: inline-block; background: #4a4a4a; border-radius: 50%; box-shadow: 0 0 1px rgba(0, 0, 0, 0.3); } .carousel .carousel-control.left span { margin-right: -27px; } .carousel .carousel-control.right span { margin-left: -27px; } .carousel .carousel-control:hover span { background: #3b3b3b; } .carousel .carousel-control i { font-size: 24px; margin-top: 13px; } .carousel .carousel-control.left { margin-left: -28px; } .carousel .carousel-control.right { margin-right: -28px; } .carousel .carousel-control.left i { margin-left: -24px; } .carousel .carousel-control.right i { margin-right: -24px; } .carousel-indicators { bottom: -42px; } .carousel-indicators li, .carousel-indicators li.active { width: 11px; height: 11px; border-radius: 50%; margin: 1px 4px; } .carousel-indicators li { border: 1px solid #475c6f; } .carousel-indicators li.active { background: #20b0b9; border-color: #20b0b9; }

Changes Made:

  1. HTML:

    • Added alt text for each image to improve accessibility.

    • Cleaned up the structure and ensured that the carousel's data-slide-to is correctly linked with each image.

  2. CSS:

    • Fixed some spacing issues and added better responsiveness for the carousel and controls.

    • Refined the carousel controls' hover effect to ensure they look consistent and stylish.

Soeng Souy

Soeng Souy

Website that learns and reads, PHP, Framework Laravel, How to and download Admin template sample source code free.

Post a Comment

CAN FEEDBACK
close