carousel with javascript

Comment

2

Tip Ramsey 1 GREPCC

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <style>
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
    width: 70%;
    margin: auto;
  }
  </style>
</head>
<body>

<div class="container">
  <br>
  <div id="myCarousel" class="carousel slide" data-ride="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>
      <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">

      <div class="item active">
        <img src="img_chania.jpg" alt="Chania" width="460" height="345">
        <div class="carousel-caption">
          <h3>Chania</h3>
          <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
        </div>
      </div>

      <div class="item">
        <img src="img_chania2.jpg" alt="Chania" width="460" height="345">
        <div class="carousel-caption">
          <h3>Chania</h3>
          <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
        </div>
      </div>
    
      <div class="item">
        <img src="img_flower.jpg" alt="Flower" width="460" height="345">
        <div class="carousel-caption">
          <h3>Flowers</h3>
          <p>Beautiful flowers in Kolymbari, Crete.</p>
        </div>
      </div>

      <div class="item">
        <img src="img_flower2.jpg" alt="Flower" width="460" height="345">
        <div class="carousel-caption">
          <h3>Flowers</h3>
          <p>Beautiful flowers in Kolymbari, Crete.</p>
        </div>
      </div>
  
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

</body>
</html>

xxxxxxxxxx

<!DOCTYPE html>

<html lang="en">

<head>

  <title>Bootstrap Example</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

  <style>

  .carousel-inner > .item > img,

  .carousel-inner > .item > a > img {

    width: 70%;

    margin: auto;

  </style>

</head>

<body>

<div class="container">

  <br>

  <div id="myCarousel" class="carousel slide" data-ride="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>

      <li data-target="#myCarousel" data-slide-to="3"></li>

    </ol>

    <!-- Wrapper for slides -->

    <div class="carousel-inner" role="listbox">

      <div class="item active">

        <img src="img_chania.jpg" alt="Chania" width="460" height="345">

        <div class="carousel-caption">

          <h3>Chania</h3>

          <p>The atmosphere in Chania has a touch of Florence and Venice.</p>

        </div>

      </div>

      <div class="item">

        <img src="img_chania2.jpg" alt="Chania" width="460" height="345">

        <div class="carousel-caption">

          <h3>Chania</h3>

          <p>The atmosphere in Chania has a touch of Florence and Venice.</p>

        </div>

      </div>

      <div class="item">

        <img src="img_flower.jpg" alt="Flower" width="460" height="345">

        <div class="carousel-caption">

          <h3>Flowers</h3>

          <p>Beautiful flowers in Kolymbari, Crete.</p>

        </div>

      </div>

      <div class="item">

        <img src="img_flower2.jpg" alt="Flower" width="460" height="345">

        <div class="carousel-caption">

          <h3>Flowers</h3>

          <p>Beautiful flowers in Kolymbari, Crete.</p>

        </div>

      </div>

    </div>

    <!-- Left and right controls -->

    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">

      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

      <span class="sr-only">Previous</span>

    </a>

    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">

      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

      <span class="sr-only">Next</span>

    </a>

  </div>

</div>

</body>

</html>

Popularity 10/10 Helpfulness 2/10 Language html

Source: Grepper

Tags: carousel html javascript

Share

Link to this answer
Share Copy Link

Contributed on Mar 09 2022

Ramsey

0 Answers Avg Quality 2/10

js image carousel script

Comment

2

Tip Repulsive Rhinoceros 1 GREPCC

var slidePosition = 1;
SlideShow(slidePosition);

// forward/Back controls
function plusSlides(n) { 	/* 
								Attach a method that invokes this (`plusSlides`) 
                                passing => 1, as an argument to your forward button. 
                                Pass => -1, as an argument when attaching a method to 
                                invoke this to your back button. 
                            */ 
  SlideShow(slidePosition += n); 
  
}

//  images controls
function currentSlide(n) { 	/* 
								Attach a method to each of your three circular dots at 
                                the bottom that when clicked will move the carousel to the 
                                corresponding image. This method should invoke 
                                `currentSlide` passing => 1 (for 1st img), 2 (for 2nd img), 
                                & 3 (for 3rd img) respectively. 
							*/ 
  SlideShow(slidePosition = n); 
  
}

function SlideShow(n) { 
  
  var i;
  var slides = document.getElementsByClassName("Containers"); // slide elements containing 
  															  // the images 
  
  var circles = document.getElementsByClassName("dots"); 	  // the 3 circular dots for 
  															  // user control to switch 
  															  // images 
  
  if (n > slides.length) {slidePosition = 1} 				  // if statements to validate 
  if (n < 1) {slidePosition = slides.length} 				  // and ensure `n` will not 
  															  // augment nor decrement 
  															  // less than 1 nor 
  															  // greater than 3 
  															  // (`slides.length`)  
  															  
  for (i = 0; i < slides.length; i++) { 					  // for loop to display none 
    														  // all slide elements 
      slides[i].style.display = "none"; 
    
  } 
  
  for (i = 0; i < circles.length; i++) { 
    
      circles[i].className = circles[i].className.replace(" enable", ""); 
    
  } 														  // for loop to "disable all 
  															  // circular dot elements 
  
  slides[slidePosition-1].style.display = "block";
  circles[slidePosition-1].className += " enable"; 
  
}

xxxxxxxxxx

var slidePosition = 1;

SlideShow(slidePosition);

// forward/Back controls

function plusSlides(n) {    /*

                                Attach a method that invokes this (`plusSlides`)

                                passing => 1, as an argument to your forward button.

                                Pass => -1, as an argument when attaching a method to

                                invoke this to your back button.

*/

  SlideShow(slidePosition += n);

//  images controls

function currentSlide(n) {  /*

                                Attach a method to each of your three circular dots at

                                the bottom that when clicked will move the carousel to the

                                corresponding image. This method should invoke

                                `currentSlide` passing => 1 (for 1st img), 2 (for 2nd img),

                                & 3 (for 3rd img) respectively.

*/

  SlideShow(slidePosition = n);

function SlideShow(n) {

  var i;

  var slides = document.getElementsByClassName("Containers"); // slide elements containing

                                                              // the images

  var circles = document.getElementsByClassName("dots");      // the 3 circular dots for

                                                              // user control to switch

                                                              // images

  if (n > slides.length) {slidePosition = 1}                  // if statements to validate

  if (n < 1) {slidePosition = slides.length}                  // and ensure `n` will not

                                                              // augment nor decrement

                                                              // less than 1 nor

                                                              // greater than 3

                                                              // (`slides.length`)

  for (i = 0; i < slides.length; i++) {                       // for loop to display none

                                                              // all slide elements

      slides[i].style.display = "none";

  for (i = 0; i < circles.length; i++) {

      circles[i].className = circles[i].className.replace(" enable", "");

  }                                                           // for loop to "disable all

                                                              // circular dot elements

  slides[slidePosition-1].style.display = "block";

  circles[slidePosition-1].className += " enable";

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: carousel carouse

Share

Link to this answer
Share Copy Link

Contributed on Jan 13 2023

Repulsive Rhinoceros

0 Answers Avg Quality 2/10

carousel library javascript

Comment

0

Tip YOU.com 1 GREPCC

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

xxxxxxxxxx

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

Popularity 9/10 Helpfulness 2/10 Language html

Source: Grepper

Share

Link to this answer
Share Copy Link

Contributed on Sep 12 2023

YOU.com

0 Answers Avg Quality 2/10

carousel with javascript

Contents

More Related Answers