Home / Questions / 460385
Accepted
Miguel
Asked: 2022-06-09 08:34:40 +0800 CST 2022-06-09 08:34:40 +0800 CST

Timeline carousel with custom

  • 772

Good, finally the last carousel of the web. This in this case is a timeline but personalized, I have used this library and this example .

I show you the code:

    /*** Timeline Carousel ***/
$('.desktop-owl.timeline').owlCarousel({
    loop: false,
    pagination: true,
    paginationNumbers: false,
    nav:true,
    center:false,
    margin:10,
    responsive:{
      0:{
        items:1
      },
      550: {
        items:2
      },
      900:{
        items:3
      },
      1000:{
        items:3
      }
    }
  });
  
  function matchTimelineHeight() {
    /* Add in the height placeholders for the images first */
    var imageHeights = [];
    $('.timeline-container .owl-carousel .owl-item img').each(function() {
      imageHeights.push($(this).height());
    });
    var tallest = Math.max.apply(null, imageHeights);
    $('.timeline-container .owl-carousel .owl-item .timeline-image').css("min-height", tallest);
  
    /* Now match heights with the placeholders added */
    var slideHeights = [];
    $('.timeline-container .owl-carousel .owl-item').each(function() {
      slideHeights.push($(this).height());
    });
    var tallest = Math.max.apply(null, slideHeights);
    $('.timeline-container .owl-carousel .owl-item').height(tallest);
    $('.timeline-container .owl-carousel .timeline-slide').css("min-height", tallest);
  }
matchTimelineHeight();
  
  /*** Newsfeed ***/
  $('.desktop-owl').owlCarousel({
    loop: true,
    pagination: true,
    paginationNumbers: false,
    nav:true,
    center: false,
    responsive:{
      0:{
        items:1
      }
    }
  });
.body {
margin: 0;
    font-family: 'Montserrat', sans-serif;
    background: #212226;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #fff;
}
.timeline-container {
    margin-top:30px;
    padding: 10px 80px 30px;
    position: absolute;
    bottom: 0px;
    width: 100%
}
.timeline-container {
    margin-top:0px;
    border-top: 1px #eeeeee solid;
}


.owl-nav {
    position: absolute;
    top: 60px;
    width: 89%;
    left: 83px;
}
/*owl carousel styles*/
.owl-carousel .owl-dots .owl-dot {
    background: #fff;
    border:solid;
    border-width:1px;
    border-color: #bfbfbf;
}
.owl-carousel .owl-dots .owl-dot.active {
    background:#417638;
}

.owl-carousel.owl-loaded {
    display: block;
}
.owl-carousel .owl-stage-outer {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    -webkit-transform: translate3d(0px, 0, 0);
}
.owl-stage-outer {
    top: -16px;
}
.owl-carousel .owl-stage {
    position: relative;
    -ms-touch-action: pan-Y;
}
.owl-carousel .owl-stage:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
.owl-carousel .owl-item {
    position: relative;
    min-height: 1px;
    float: left;
    -webkit-backface-visibility: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.owl-carousel .owl-item img {
    display: block;
    width: 100%;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

/*timeline slider styles*/
.timeline-slide {
    max-width: 350px;
    margin: 2.2rem 0 0 0;
    width: 100%;
    background-color: inherit;
    position: relative;
}
.timeline-slide .circle {
    border: 4px #eae100 solid;
    background-color: #e0d806;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-redius: 50%;
    height: 16px;
    width: 16px;
    position: absolute;
    left: 51.6%;
    margin-left: -15px;
    top: -33px;
    z-index: 2000;
    overflow: visible;
}
.timeline-copy {
    font-size: 0.7em;
    color: #fff;
    background-color: inherit;
    margin: 1rem;
    padding-bottom: 5px;
    border: solid 1px #fff;
}
.timeline-slide .vertical-line {
    border-left: 1px #eeeeee solid;
    height: 18px;
    position: absolute;
    left: 50%;
    margin-left: -2.5px;
    top: -18px;
    z-index: 1000;
}
.timeline-slide .timeline-copy h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0px;
}
.timeline-slide .timeline-copy {
    padding: 1rem 0.5rem;
    color: #000;
    text-align: center;
}
.timeline-slide .timeline-copy p {
    margin-bottom: 0px;
    font-size: 13px;
    margin-top: 11px;
    padding: 0px 17px;
}
.timeline-container {
  margin-top:20px;
  padding-top:6px;
}
.timeline-container .owl-stage {
    margin-left:18px;
}
.owl-carousel .owl-dots .owl-dot {
    width: 15px;
    height: 15px;
    background: #e6c996;
    border-radius: 100%;
    display: inline-block;
    margin: 0 5px;
}
.owl-carousel .owl-dots {
    text-align: center;
    margin-top:1em;
    display: none;
}
.owl-carousel .owl-nav .owl-prev {
   width: 55px;
    height: 36px;
    background: url(https://cdn2.iconfinder.com/data/icons/font-awesome/1792/angle-left-512.png) no-repeat center;
    border: solid transparent;
    position: relative;
    left: -14px;
    background-size: cover;
}
.owl-carousel .owl-nav .owl-next {
        width: 36px;
    height: 35px;
    background: url(https://cdn.iconscout.com/icon/free/png-256/chevron-thin-right-1859438-1577834.png) no-repeat center;
    border: solid transparent;
    position: absolute;
    right: 0px;
    background-size: cover;
}
.owl-prev span {
  display:none;
}
.owl-next span {
  display:none;
}
/* .owl-prev, .owl-next {
  
} */

button:focus {outline:0;}

@media screen and (max-width: 560px) {
  .timeline-slide {
    margin-top: 4.2rem;
    margin-left: 3.5rem;
  }
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>


<section class="normalDay opcidadNormaDay" id="modulNormal">

   <!-- <div class="barraNormal"></div>-->
   <div class="timeline-container">
        <div class="clearfix desktop-carousel desktop-owl timeline owl-carousel">
            <div class="timeline-slide">
                <div class="circle"></div>
                <div class="vertical-line"></div>
                <div class="timeline-copy">
                    <h3>09:00 - 13:00</h3>
                    <p>Preparatory phase with mobility and flexibility exercises, muscle pre-activation protocol and warm-up.</p>
                </div>
            </div>
            <div class="timeline-slide">
                <div class="circle"></div>
                <div class="vertical-line"></div>
                <div class="timeline-copy">
                    <h3>13:00 - 16:00</h3>
                    <p>Preparatory phase with mobility and flexibility exercises, muscle pre-activation protocol and warm-up.</p>
                </div>
            </div>
            <div class="timeline-slide">
                <div class="circle"></div>
                <div class="vertical-line"></div>
                <div class="timeline-copy">
                    <h3>16:00 - 18:00</h3>
                    <p>Preparatory phase with mobility and flexibility exercises, muscle pre-activation protocol and warm-up.</p>
                </div>
            </div>
            <div class="timeline-slide">
                <div class="circle"></div>
                <div class="vertical-line"></div>
                <div class="timeline-copy">
                    <h3>16:00 - 18:00</h3>
                    <p>Preparatory phase with mobility and flexibility exercises, muscle pre-activation protocol and warm-up.</p>
                </div>
            </div>
        </div>
    </div>
</section>

To give you an idea, what I'm looking for is exactly this:

enter image description here

If you realize what makes marking the one you are seeing (the circle) comes out in yellow and the others in gray, then the only text box that is seen is the one you are seeing, the others only see the time and the idea It is as you give it right or left it moves and shows a box and around the hours.

I hope I have explained myself well, is it possible what I say in this way?

javascript

3 Answers

  1. Best Answer

    Esta pregunta es muy similar a esta otra y la solución es prácticamente la misma, salvo por un par de excepciones:

    • En la otra pregunta usas Bootstrap Carousel y en esta Owl Carousel, por lo que la captura de evento y detección de índice se debe adaptar. Referencia: Owl Carousel Events
    • Quieres mostrar más de un elemento en el espacio del Carousel y, resulta que este punto es el más importante, porque no hay forma de obtener el índice real, a menos que hagas que aparezca al centro, porque, sin centrar, los botones harán que el avance sea por "página" y no por elemento

    En CSS hay que hacer algunas modificaciones:

    • Poner el punto en color gris
    • Ocultar el texto de cada elemento
    • Agregar dos clases:
      • .timeline-slide.active para cambiar el color del punto al elemento activo
      • .timeline-slide.active .timeline-copy pto display the text of the active element

    In HTML add the class activeto the first element.

    In JavaScript:

    • When initializing the Carousel you must set the property center:trueso that the active element is centered.
    • Add a function to listen to the event changed.owl.carouseland change the classes there to specify the active element.

    Check the comments for more information.

    /*** Timeline Carousel ***/
$('.desktop-owl.timeline').owlCarousel({
    loop: false,
    pagination: true,
    paginationNumbers: false,
    nav:true,
    center:true,
    margin:10,
    responsive:{
      0:{
        items:1
      },
      550: {
        items:2
      },
      900:{
        items:3
      },
      1000:{
        items:3
      }
    }
  });

// La solución es igual a la de la otra pregunta
// Hice "copy/paste" y adapté
// Escucha el evento adecuado
$('.desktop-owl.timeline').on('changed.owl.carousel', function (e) {
    // Obtener posición del elemento activo
    let index = e.item.index;
    // Solo si hay un elemento válido
    if(index >= 0) {
        // Eliminar clase activa de indicadores
        $('.timeline-slide.active').removeClass('active');
        // Activar elemento por índice
        $('.timeline-slide').eq(index).addClass('active');
    }
});
  
function matchTimelineHeight() {
    /* Add in the height placeholders for the images first */
    var imageHeights = [];
    $('.timeline-container .owl-carousel .owl-item img').each(function() {
      imageHeights.push($(this).height());
    });
    var tallest = Math.max.apply(null, imageHeights);
    $('.timeline-container .owl-carousel .owl-item .timeline-image').css("min-height", tallest);
  
    /* Now match heights with the placeholders added */
    var slideHeights = [];
    $('.timeline-container .owl-carousel .owl-item').each(function() {
      slideHeights.push($(this).height());
    });
    var tallest = Math.max.apply(null, slideHeights);
    $('.timeline-container .owl-carousel .owl-item').height(tallest);
    $('.timeline-container .owl-carousel .timeline-slide').css("min-height", tallest);
  }
matchTimelineHeight();
  
  /*** Newsfeed ***/
  $('.desktop-owl').owlCarousel({
    loop: true,
    pagination: true,
    paginationNumbers: false,
    nav:true,
    center: false,
    responsive:{
      0:{
        items:1
      }
    }
  });
    .body {
margin: 0;
    font-family: 'Montserrat', sans-serif;
    background: #212226;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #fff;
}
.timeline-container {
    margin-top:30px;
    padding: 10px 80px 30px;
    position: absolute;
    bottom: 0px;
    width: 100%
}
.timeline-container {
    margin-top:0px;
    border-top: 1px #eeeeee solid;
}


.owl-nav {
    position: absolute;
    top: 60px;
    width: 89%;
    left: 83px;
}
/*owl carousel styles*/
.owl-carousel .owl-dots .owl-dot {
    background: #fff;
    border:solid;
    border-width:1px;
    border-color: #bfbfbf;
}
.owl-carousel .owl-dots .owl-dot.active {
    background:#417638;
}

.owl-carousel.owl-loaded {
    display: block;
}
.owl-carousel .owl-stage-outer {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    -webkit-transform: translate3d(0px, 0, 0);
}
.owl-stage-outer {
    top: -16px;
}
.owl-carousel .owl-stage {
    position: relative;
    -ms-touch-action: pan-Y;
}
.owl-carousel .owl-stage:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
.owl-carousel .owl-item {
    position: relative;
    min-height: 1px;
    float: left;
    -webkit-backface-visibility: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.owl-carousel .owl-item img {
    display: block;
    width: 100%;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

/*timeline slider styles*/
.timeline-slide {
    max-width: 350px;
    margin: 2.2rem 0 0 0;
    width: 100%;
    background-color: inherit;
    position: relative;
}
.timeline-slide .circle {
    border: 4px #ccc solid;
    background-color: #ccc;
    border-radius: 50%;
    height: 16px;
    width: 16px;
    position: absolute;
    left: 51.6%;
    margin-left: -15px;
    top: -33px;
    z-index: 2000;
    overflow: visible;
}
.timeline-slide.active .circle {
    border: 4px #eae100 solid;
    background-color: #e0d806;
}
.timeline-copy {
    font-size: 0.7em;
    color: #fff;
    background-color: inherit;
    margin: 1rem;
    padding-bottom: 5px;
    border: solid 1px #fff;
}
.timeline-slide .vertical-line {
    border-left: 1px #eeeeee solid;
    height: 18px;
    position: absolute;
    left: 50%;
    margin-left: -2.5px;
    top: -18px;
    z-index: 1000;
}
.timeline-slide .timeline-copy h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0px;
}
.timeline-slide .timeline-copy {
    padding: 1rem 0.5rem;
    color: #000;
    text-align: center;
}
.timeline-slide .timeline-copy p {
    display: none;
    margin-bottom: 0px;
    font-size: 13px;
    margin-top: 11px;
    padding: 0px 17px;
}
.timeline-slide.active .timeline-copy p {
    display: block;
}
.timeline-container {
  margin-top:20px;
  padding-top:6px;
}
.timeline-container .owl-stage {
    margin-left:18px;
}
.owl-carousel .owl-dots .owl-dot {
    width: 15px;
    height: 15px;
    background: #e6c996;
    border-radius: 100%;
    display: inline-block;
    margin: 0 5px;
}
.owl-carousel .owl-dots {
    text-align: center;
    margin-top:1em;
    display: none;
}
.owl-carousel .owl-nav .owl-prev {
   width: 55px;
    height: 36px;
    background: url(https://cdn2.iconfinder.com/data/icons/font-awesome/1792/angle-left-512.png) no-repeat center;
    border: solid transparent;
    position: relative;
    left: -14px;
    background-size: cover;
}
.owl-carousel .owl-nav .owl-next {
        width: 36px;
    height: 35px;
    background: url(https://cdn.iconscout.com/icon/free/png-256/chevron-thin-right-1859438-1577834.png) no-repeat center;
    border: solid transparent;
    position: absolute;
    right: 0px;
    background-size: cover;
}
.owl-prev span {
  display:none;
}
.owl-next span {
  display:none;
}
/* .owl-prev, .owl-next {
  
} */

button:focus {outline:0;}

@media screen and (max-width: 560px) {
  .timeline-slide {
    margin-top: 4.2rem;
    margin-left: 3.5rem;
  }
}
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>


<section class="normalDay opcidadNormaDay" id="modulNormal">

   <!-- <div class="barraNormal"></div>-->
   <div class="timeline-container">
        <div class="clearfix desktop-carousel desktop-owl timeline owl-carousel">
            <div class="timeline-slide active">
                <div class="circle"></div>
                <div class="vertical-line"></div>
                <div class="timeline-copy">
                    <h3>09:00 - 13:00</h3>
                    <p>Preparatory phase with mobility and flexibility exercises, muscle pre-activation protocol and warm-up.</p>
                </div>
            </div>
            <div class="timeline-slide">
                <div class="circle"></div>
                <div class="vertical-line"></div>
                <div class="timeline-copy">
                    <h3>13:00 - 16:00</h3>
                    <p>Preparatory phase with mobility and flexibility exercises, muscle pre-activation protocol and warm-up.</p>
                </div>
            </div>
            <div class="timeline-slide">
                <div class="circle"></div>
                <div class="vertical-line"></div>
                <div class="timeline-copy">
                    <h3>16:00 - 18:00</h3>
                    <p>Preparatory phase with mobility and flexibility exercises, muscle pre-activation protocol and warm-up.</p>
                </div>
            </div>
            <div class="timeline-slide">
                <div class="circle"></div>
                <div class="vertical-line"></div>
                <div class="timeline-copy">
                    <h3>16:00 - 18:00</h3>
                    <p>Preparatory phase with mobility and flexibility exercises, muscle pre-activation protocol and warm-up.</p>
                </div>
            </div>
        </div>
    </div>
</section>

    Note: If you don't want the elements to appear centered, you would have to modify the script to advance manually or, alternatively, follow the suggestions proposed in the other answers.

    • 6

  2. Rather it seems that you are looking to do it, it is a timeline.

    Since the carrousel does not reach what the image approximates.
    It should be remembered that code is not made for others, but it can be guided in the right direction to proceed.

    Here I leave you a basic example of timeline, which I think would be simpler to start by understanding how this part works. And then apply it to the carrousel.

    Anyway, I leave you another solution, for a carousel with timeline: https://codepen.io/hfavis/pen/JWzpXR

    --- Edit: Francisco has also sent me a link, with a visually more dynamic example. Please check it out -> https://codepen.io/vram1980/pen/jrzgXk/

    $(function(){
    var inputs = $('.input');
    var paras = $('.description-flex-container').find('p');
    inputs.click(function(){
        var t = $(this),
                ind = t.index(),
                matchedPara = paras.eq(ind);
        t.add(matchedPara).addClass('active');  inputs.not(t).add(paras.not(matchedPara)).removeClass('active');
    });
});
    html, body {
  height: 100%;
}

body {
  font-family: "Quicksand", sans-serif;
  font-weight: 500;
  color: #424949;
  background-color: #ECF0F1;
  padding: 0 25px;
  display: flex;
  flex-direction: column;
  position: relative;
}

h1 {
  text-align: center;
  height: 38px;
  margin: 60px 0;
}
h1 span {
  white-space: nowrap;
}

.flex-parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.input-flex-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 80vw;
  height: 100px;
  max-width: 1000px;
  position: relative;
  z-index: 0;
}

.input {
  width: 25px;
  height: 25px;
  background-color: black;
  position: relative;
  border-radius: 50%;
}
.input:hover {
  cursor: pointer;
}
.input::before, .input::after {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  top: 50%;
  transform: translateY(-50%);
  background-color: black;
  width: 26.6666666667vw;
  height: 5px;
  max-width: 333.3333333333px;
}
.input::before {
  left: calc(-26.6666666667vw + 12.5px);
}
.input::after {
  right: calc(-26.6666666667vw + 12.5px);
}
.input.active {
  background-color: black;
}
.input.active::before {
  background-color: black;
}
.input.active::after {
  background-color: gray;
}
.input.active span {
  font-weight: 700;
}
.input.active span::before {
  font-size: 13px;
}
.input.active span::after {
  font-size: 15px;
}
.input.active ~ .input, .input.active ~ .input::before, .input.active ~ .input::after {
  background-color: gray;
}
.input span {
  width: 1px;
  height: 1px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  visibility: hidden;
}
.input span::before, .input span::after {
  visibility: visible;
  position: absolute;
  left: 50%;
}
.input span::after {
  content: attr(data-year);
  top: 25px;
  transform: translateX(-50%);
  font-size: 14px;
}
.input span::before {
  content: attr(data-info);
  top: -65px;
  width: 70px;
  transform: translateX(-5px) rotateZ(-45deg);
  font-size: 12px;
  text-indent: -10px;
}

.description-flex-container {
  width: 80vw;
  font-weight: 400;
  font-size: 22px;
  margin-top: 100px;
  max-width: 1000px;
}
.description-flex-container p {
  margin-top: 0;
  display: none;
}
.description-flex-container p.active {
  display: block;
}

@media (min-width: 1250px) {
  .input::before {
    left: -320.8333333333px;
  }

  .input::after {
    right: -320.8333333333px;
  }
}
@media (max-width: 850px) {
  .input {
    width: 17px;
    height: 17px;
  }
  .input::before, .input::after {
    height: 3px;
  }
  .input::before {
    left: calc(-26.6666666667vw + 8.5px);
  }
  .input::after {
    right: calc(-26.6666666667vw + 8.5px);
  }
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex-parent">
    <div class="input-flex-container">
        <div class="input">
            <span data-year="Descripcion1" data-info="Primero"></span>
        </div>
        <div class="input">
            <span data-year="Descripcion2" data-info="Segundo"></span>
        </div>
        <div class="input active">
            <span data-year="Descripcion3" data-info="Tercero"></span>
        </div>
    </div>
    <div class="description-flex-container">
    </div>
</div>

    • 4

  3. It seems to me that you do not have a specific problem; simply what you have done does not yet have the scope of what you present in the image, and in your example of the sniped I cannot see that you have tried it; then I think that maybe you need guidance on what concepts to apply.

    For you to have it, I suggest you apply the following concepts:

    1. take the items from the carousel and number them starting from 0.

    2. You put a display none on all of them and you put the color gray on the little circle.

    3. Every time the click event exists to move to the right or left, you validate in which position of the carousel you are and that element you remove the display none from and replace the color of the circle.

    In theory you need: investigate how to do what I just explained to you and write the code.

    If when implementing it you run into any other problem / error, we will gladly support you. Greetings.

    • 3