Will123

Does anybody know how to replicate the scrolling animation from this site https://selangorsummit.com/sabc-2/ at the Why attend section (yellow background) onto my website -- https://www.unswaseanconference.com/networking-info on the Why attend section (blue background).

hi @tuanphan, the caption is already there. Its under the flags

In this page of my site: https://www.unswaseanconference.com/about-asean-2021 I want to make the caption of each image in my list carousel to only appear on the centre of the image and also only appear when the image is hovered. Any help on this will be greatly appreciated. My idea is for it to be like the one discussed on this post: However, that post only works for summary. When I tried applying it to my code, it didn't work

Hi @bangank36, I am struggling to make it work on my site. I'll really appreciate it if you'd help :). Here is my site: https://www.unswaseanconference.com/about-asean-2021 I am trying to implement it on my second and third carousel.

hi @tuanphan, I have replaced my code with your code and it still does not work. Here is what the carousel currently looks like -- https://www.unswaseanconference.com/about-asean-2021-v2

@tuanphan

@tuanphan Header Code: <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/owl.carousel.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.carousel.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.theme.default.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> Code Injection block: <div class="banner_destacados_wrapper pt-4 mt-4"> <div class="container14"> <div class="top_banner"> <div class="content_title"> <h3 class="title"> <small>Owl Carousel with </small>Big Center Item </h3> </div> </div> <div class="gallery_wrapper owl-carousel"> <div class="item"> <img src="https://cdn.pixabay.com/photo/2020/07/14/13/38/puffin-5404178__340.jpg"> <div class="content_wrapper"> <div class="content_title"> <h4 class="title"> <small>voluptas corporis</small> Lorem ipsum dolor </h4> </div> <div class="desc"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat iste beatae cum nemo. </div> </div> <div class="links_wrapper"> <a href="http://www.migueldeharo.com" class="btn_primary has_icon"> <i class="far fa-dizzy"></i> wow! </a> </div> </div> <div class="item"> <img src="https://cdn.pixabay.com/photo/2015/03/26/09/54/pug-690566__340.jpg"> <div class="content_wrapper"> <div class="content_title"> <h4 class="title"> <small>voluptas corporis</small> Lorem ipsum dolor </h4> </div> <div class="desc"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat iste beatae cum nemo. </div> </div> <div class="links_wrapper"> <a href="http://www.migueldeharo.com" class="btn_primary has_icon"> <i class="far fa-dizzy"></i> wow! </a> </div> </div> <div class="item"> <img src="https://cdn.pixabay.com/photo/2016/12/13/05/15/puppy-1903313__340.jpg"> <div class="content_wrapper"> <div class="content_title"> <h4 class="title"> <small>voluptas corporis</small> Lorem ipsum dolor </h4> </div> <div class="desc"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat iste beatae cum nemo. </div> </div> <div class="links_wrapper"> <a href="http://www.migueldeharo.com" class="btn_primary has_icon"> <i class="far fa-dizzy"></i> wow! </a> </div> </div> <div class="item"> <img src="https://cdn.pixabay.com/photo/2014/04/13/20/49/cat-323262__340.jpg"> <div class="content_wrapper"> <div class="content_title"> <h4 class="title"> <small>voluptas corporis</small> Lorem ipsum dolor </h4> </div> <div class="desc"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat iste beatae cum nemo. </div> </div> <div class="links_wrapper"> <a href="http://www.migueldeharo.com" class="btn_primary has_icon"> <i class="far fa-dizzy"></i> wow! </a> </div> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-md-12 mt-4 pt-4 pb-4 text-center text-white"> <small>By Miguel de Haro - <strong>FrontEnd Developer</strong><br><a class="text-secondary" href="http://www.migueldeharo.com" target="_blank">www.migueldeharo.com</a></small> </div> </div> </div> <style> @charset "UTF-8"; /*colors*/ @import url("https://fonts.googleapis.com/css2?family=Dosis:wght@300;400;500;600;700&family=Quicksand:wght@300;400;500;600;700&display=swap"); /* Font sizes */ /* End */ /* Font familys */ /* End */ .content_title { position: relative; margin: 0 auto 40px; } .banner_section_title .content_title { margin-bottom: 0; } .content_title .title { font-size: 56px; font-family: "Dosis", sans-serif; color: #000000; font-weight: 600; line-height: 60px; letter-spacing: 2.8px; text-align: left; } .content_title .title small, .content_title .title span, .content_title .title .subtitle { font-size: 20px; line-height: 25px; font-family: "Dosis", sans-serif; font-weight: 300; color: #FF08FF; display: block; } @media (max-width: 575px) { .content_title .title { font-size: 28px; line-height: 30px; letter-spacing: 1.8px; } } .desc { margin: 15px auto 10px; font-family: "Dosis", sans-serif; font-weight: 400; font-size: 18px; color: #ffffff; line-height: 40px; letter-spacing: 1.35px; } @media (max-width: 575px) { .desc { line-height: 32px !important; } } .btn_primary { position: relative; display: inline-flex; align-items: center; flex-wrap: nowrap; border: none; text-align: center; padding: 0 25px; height: 50px; border-radius: 35px; text-decoration: none; font-weight: 500; text-transform: uppercase; font-size: 18px; font-family: "Quicksand", sans-serif; transition: all 0.5s; cursor: pointer; background-color: #FF08FF; color: white; } .btn_primary > i { display: none; } .btn_primary.has_icon { padding-left: 70px; } .btn_primary.has_icon i { display: block; margin-right: 30px; font-weight: 300; position: absolute; top: 50%; left: 20px; transform: translateY(-50%); opacity: 1; max-width: 50px; transition: all 0.4s; } .btn_primary.has_icon i::after { position: absolute; content: ""; width: 1px; background-color: white; top: -16px; bottom: -16px; right: -15px; } .btn_primary::after { display: inline-block; content: ""; width: 0; height: 25px; z-index: 1; background-repeat: no-repeat; margin-left: 0; overflow: hidden; transition: all 0.5s; } .btn_primary:hover.has_icon { padding-left: 25px; } .btn_primary:hover.has_icon i { margin-right: 0; max-width: 0; opacity: 0; } .btn_primary:hover::after { width: 25px !important; margin-left: 15px; } .btn_primary:hover a, .btn_primary:hover i { color: white; } /* End utils */ .picture_wrapper { position: relative; } .picture_wrapper img { width: 100%; height: 100%; object-fit: cover; } body { background: #11111C; } .banner_destacados_wrapper { padding: 0 0 70px; margin: 0 0 70px; } .banner_destacados_wrapper .top_banner { margin-bottom: 50px; } .banner_destacados_wrapper .top_banner .content_title .title { text-align: center; color: white; } .banner_destacados_wrapper .gallery_wrapper .owl-stage-outer .owl-stage { display: flex; align-items: center; } .banner_destacados_wrapper .gallery_wrapper .owl-stage-outer .owl-stage .owl-item .item { position: relative; height: 400px; overflow: hidden; } .banner_destacados_wrapper .gallery_wrapper .owl-stage-outer .owl-stage .owl-item .item img { width: 100%; height: 100%; object-fit: cover; } .banner_destacados_wrapper .gallery_wrapper .owl-stage-outer .owl-stage .owl-item .item .content_wrapper { z-index: 1; position: absolute; height: auto; bottom: 30px; left: 30px; right: 30px; width: 320px; min-width: 320px; color: white; overflow: hidden; } .banner_destacados_wrapper .gallery_wrapper .owl-stage-outer .owl-stage .owl-item .item .content_wrapper .content_title { margin-bottom: 0; } .banner_destacados_wrapper .gallery_wrapper .owl-stage-outer .owl-stage .owl-item .item .content_wrapper .content_title .title { font-size: 22px; line-height: 25px; color: white; text-align: left; } .banner_destacados_wrapper .gallery_wrapper .owl-stage-outer .owl-stage .owl-item .item .content_wrapper .content_title .title small { font-size: 12px; line-height: 14px; color: white; font-weight: bold; display: none; } .banner_destacados_wrapper .gallery_wrapper .owl-stage-outer .owl-stage .owl-item .item .content_wrapper .desc { line-height: 24px; max-height: 0; overflow: hidden; margin-bottom: 0; transition: all 0.7s; } .banner_destacados_wrapper .gallery_wrapper .owl-stage-outer .owl-stage .owl-item .item .links_wrapper { z-index: 1; display: inline-block; position: absolute; bottom: 30px; right: 30px; transform: translateX(calc(100% + 35px)); transition: all 0.5s; } .banner_destacados_wrapper .gallery_wrapper .owl-stage-outer .owl-stage .owl-item .item::before { position: absolute; content: ""; top: -300px; bottom: 0; left: 0; right: 0; background: black; background: linear-gradient(0deg, rgba(0, 0, 0, 0.8183648459) 0%, rgba(0, 0, 0, 0) 100%); opacity: 0.6; transition: all 0.5s; } .banner_destacados_wrapper .gallery_wrapper .owl-stage-outer .owl-stage .owl-item.active { width: 380px !important; transition: width 0.5s; } .banner_destacados_wrapper .gallery_wrapper .owl-stage-outer .owl-stage .owl-item.active.center { width: 600px !important; } .banner_destacados_wrapper .gallery_wrapper .owl-stage-outer .owl-stage .owl-item.active.center .item { height: 500px; } .banner_destacados_wrapper .gallery_wrapper .owl-stage-outer .owl-stage .owl-item.active.center .item img { width: 100%; height: 100%; object-fit: cover; } .banner_destacados_wrapper .gallery_wrapper .owl-stage-outer .owl-stage .owl-item.active.center .item .content_wrapper .content_title .title { font-size: 38px; line-height: 40px; } .banner_destacados_wrapper .gallery_wrapper .owl-stage-outer .owl-stage .owl-item.active.center .item .content_wrapper .content_title .title small { display: block; } .banner_destacados_wrapper .gallery_wrapper .owl-stage-outer .owl-stage .owl-item.active.center .item .links_wrapper { transform: translateX(0); transition-delay: 0.6s; } .banner_destacados_wrapper .gallery_wrapper .owl-stage-outer .owl-stage .owl-item.active.center .item::before { top: 300px; opacity: 1; } .banner_destacados_wrapper .gallery_wrapper .owl-stage-outer .owl-stage .owl-item.active.center:hover .item .content_wrapper .desc { max-height: 500px; overflow: hidden; margin-bottom: 0; } .banner_destacados_wrapper .gallery_wrapper .owl-dots { display: inline-flex; justify-content: center; align-items: center; position: absolute; left: 50%; bottom: -70px; transform: translateX(-50%); } .banner_destacados_wrapper .gallery_wrapper .owl-dots .owl-dot { position: relative; display: inline-block; vertical-align: middle; float: none; margin-right: 15px; width: 12px; height: 12px; border-radius: 50%; background-color: #DCD9D2; transition: all, 0.2s; } .banner_destacados_wrapper .gallery_wrapper .owl-dots .owl-dot:hover, .banner_destacados_wrapper .gallery_wrapper .owl-dots .owl-dot.active, .banner_destacados_wrapper .gallery_wrapper .owl-dots .owl-dot.selected { width: 7px; height: 7px; background-color: #FF08FF; } .banner_destacados_wrapper .gallery_wrapper .owl-dots .owl-dot:hover::before, .banner_destacados_wrapper .gallery_wrapper .owl-dots .owl-dot.active::before, .banner_destacados_wrapper .gallery_wrapper .owl-dots .owl-dot.selected::before { position: absolute; content: ""; top: -4px; bottom: -4px; left: -4px; right: -4px; border-radius: 50%; border: 1px solid #FF08FF; background-color: transparent; } </style> <script> $(document).ready(function(){ $('.owl-carousel').owlCarousel({ loop: true, center: true, nav: true, dots: true, items: 3, navText: ['<span></span>', '<span></span>'], autoplay: false }) }); </script>

Site URL: https://www.unswaseanconference.com/about-asean-2021-v2 I am trying to recreate this codepen code -- https://codepen.io/mdharo/pen/OJWeLKO -- into my site by injecting it into a code block and adding the css libraries and js files to the header. However, the slider is not working, it is not horizontal and the image is not displaying. I also already compiled the SCSS code from codepen to CSS. Any help would be greatly appreciated. This is how it looks like in my site: https://www.unswaseanconference.com/about-asean-2021-v2

Yes I do. Please help 🙂

I added the following code into the header: <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/owl.carousel.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.carousel.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.theme.default.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> And added the following css, html and js code into my code block: <div class="banner_destacados_wrapper pt-4 mt-4"> <div class="container14"> <div class="top_banner"> <div class="content_title"> <h3 class="title"> <small>Owl Carousel with </small>Big Center Item </h3> </div> </div> <div class="gallery_wrapper owl-carousel"> <div class="item"> <img src="https://cdn.pixabay.com/photo/2020/07/14/13/38/puffin-5404178__340.jpg"> <div class="content_wrapper"> <div class="content_title"> <h4 class="title"> <small>voluptas corporis</small> Lorem ipsum dolor </h4> </div> <div class="desc"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat iste beatae cum nemo. </div> </div> <div class="links_wrapper"> <a href="http://www.migueldeharo.com" class="btn_primary has_icon"> <i class="far fa-dizzy"></i> wow! </a> </div> </div> <div class="item"> <img src="https://cdn.pixabay.com/photo/2015/03/26/09/54/pug-690566__340.jpg"> <div class="content_wrapper"> <div class="content_title"> <h4 class="title"> <small>voluptas corporis</small> Lorem ipsum dolor </h4> </div> <div class="desc"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat iste beatae cum nemo. </div> </div> <div class="links_wrapper"> <a href="http://www.migueldeharo.com" class="btn_primary has_icon"> <i class="far fa-dizzy"></i> wow! </a> </div> </div> <div class="item"> <img src="https://cdn.pixabay.com/photo/2016/12/13/05/15/puppy-1903313__340.jpg"> <div class="content_wrapper"> <div class="content_title"> <h4 class="title"> <small>voluptas corporis</small> Lorem ipsum dolor </h4> </div> <div class="desc"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat iste beatae cum nemo. </div> </div> <div class="links_wrapper"> <a href="http://www.migueldeharo.com" class="btn_primary has_icon"> <i class="far fa-dizzy"></i> wow! </a> </div> </div> <div class="item"> <img src="https://cdn.pixabay.com/photo/2014/04/13/20/49/cat-323262__340.jpg"> <div class="content_wrapper"> <div class="content_title"> <h4 class="title"> <small>voluptas corporis</small> Lorem ipsum dolor </h4> </div> <div class="desc"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat iste beatae cum nemo. </div> </div> <div class="links_wrapper"> <a href="http://www.migueldeharo.com" class="btn_primary has_icon"> <i class="far fa-dizzy"></i> wow! </a> </div> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-md-12 mt-4 pt-4 pb-4 text-center text-white"> <small>By Miguel de Haro - <strong>FrontEnd Developer</strong><br><a class="text-secondary" href="http://www.migueldeharo.com" target="_blank">www.migueldeharo.com</a></small> </div> </div> </div> <style> @charset "UTF-8"; /*colors*/ @import url("https://fonts.googleapis.com/css2?family=Dosis:wght@300;400;500;600;700&family=Quicksand:wght@300;400;500;600;700&display=swap"); /* Font sizes */ /* End */ /* Font familys */ /* End */ .content_title { position: relative; margin: 0 auto 40px; } .banner_section_title .content_title { margin-bottom: 0; } .content_title .title { font-size: 56px; font-family: "Dosis", sans-serif; color: #000000; font-weight: 600; line-height: 60px; letter-spacing: 2.8px; text-align: left; } .content_title .title small, .content_title .title span, .content_title .title .subtitle { font-size: 20px; line-height: 25px; font-family: "Dosis", sans-serif; font-weight: 300; color: #FF08FF; display: block; } @media (max-width: 575px) { .content_title .title { font-size: 28px; line-height: 30px; letter-spacing: 1.8px; } } .desc { margin: 15px auto 10px; font-family: "Dosis", sans-serif; font-weight: 400; font-size: 18px; color: #ffffff; line-height: 40px; letter-spacing: 1.35px; } @media (max-width: 575px) { .desc { line-height: 32px !important; } } .btn_primary { position: relative; display: inline-flex; align-items: center; flex-wrap: nowrap; border: none; text-align: center; padding: 0 25px; height: 50px; border-radius: 35px; text-decoration: none; font-weight: 500; text-transform: uppercase; font-size: 18px; font-family: "Quicksand", sans-serif; transition: all 0.5s; cursor: pointer; background-color: #FF08FF; color: white; } .btn_primary > i { display: none; } .btn_primary.has_icon { padding-left: 70px; } .btn_primary.has_icon i { display: block; margin-right: 30px; font-weight: 300; position: absolute; top: 50%; left: 20px; transform: translateY(-50%); opacity: 1; max-width: 50px; transition: all 0.4s; } .btn_primary.has_icon i::after { position: absolute; content: ""; width: 1px; background-color: white; top: -16px; bottom: -16px; right: -15px; } .btn_primary::after { display: inline-block; content: ""; width: 0; height: 25px; z-index: 1; background-repeat: no-repeat; margin-left: 0; overflow: hidden; transition: all 0.5s; } .btn_primary:hover.has_icon { padding-left: 25px; } .btn_primary:hover.has_icon i { margin-right: 0; max-width: 0; opacity: 0; } .btn_primary:hover::after { width: 25px !important; margin-left: 15px; } .btn_primary:hover a, .btn_primary:hover i { color: white; } /* End utils */ .picture_wrapper { position: relative; } .picture_wrapper img { width: 100%; height: 100%; object-fit: cover; } body { background: #11111C; } .banner_destacados_wrapper { padding: 0 0 70px; margin: 0 0 70px; } .banner_destacados_wrapper .top_banner { margin-bottom: 50px; } .banner_destacados_wrapper .top_banner .content_title .title { text-align: center; color: white; } .banner_destacados_wrapper .gallery_wrapper .owl-stage-outer .owl-stage { display: flex; align-items: center; } .banner_destacados_wrapper .gallery_wrapper .owl-stage-outer .owl-stage .owl-item .item { position: relative; height: 400px; overflow: hidden; } .banner_destacados_wrapper .gallery_wrapper .owl-stage-outer .owl-stage .owl-item .item img { width: 100%; height: 100%; object-fit: cover; } .banner_destacados_wrapper .gallery_wrapper .owl-stage-outer .owl-stage .owl-item .item .content_wrapper { z-index: 1; position: absolute; height: auto; bottom: 30px; left: 30px; right: 30px; width: 320px; min-width: 320px; color: white; overflow: hidden; } .banner_destacados_wrapper .gallery_wrapper .owl-stage-outer .owl-stage .owl-item .item .content_wrapper .content_title { margin-bottom: 0; } .banner_destacados_wrapper .gallery_wrapper .owl-stage-outer .owl-stage .owl-item .item .content_wrapper .content_title .title { font-size: 22px; line-height: 25px; color: white; text-align: left; } .banner_destacados_wrapper .gallery_wrapper .owl-stage-outer .owl-stage .owl-item .item .content_wrapper .content_title .title small { font-size: 12px; line-height: 14px; color: white; font-weight: bold; display: none; } .banner_destacados_wrapper .gallery_wrapper .owl-stage-outer .owl-stage .owl-item .item .content_wrapper .desc { line-height: 24px; max-height: 0; overflow: hidden; margin-bottom: 0; transition: all 0.7s; } .banner_destacados_wrapper .gallery_wrapper .owl-stage-outer .owl-stage .owl-item .item .links_wrapper { z-index: 1; display: inline-block; position: absolute; bottom: 30px; right: 30px; transform: translateX(calc(100% + 35px)); transition: all 0.5s; } .banner_destacados_wrapper .gallery_wrapper .owl-stage-outer .owl-stage .owl-item .item::before { position: absolute; content: ""; top: -300px; bottom: 0; left: 0; right: 0; background: black; background: linear-gradient(0deg, rgba(0, 0, 0, 0.8183648459) 0%, rgba(0, 0, 0, 0) 100%); opacity: 0.6; transition: all 0.5s; } .banner_destacados_wrapper .gallery_wrapper .owl-stage-outer .owl-stage .owl-item.active { width: 380px !important; transition: width 0.5s; } .banner_destacados_wrapper .gallery_wrapper .owl-stage-outer .owl-stage .owl-item.active.center { width: 600px !important; } .banner_destacados_wrapper .gallery_wrapper .owl-stage-outer .owl-stage .owl-item.active.center .item { height: 500px; } .banner_destacados_wrapper .gallery_wrapper .owl-stage-outer .owl-stage .owl-item.active.center .item img { width: 100%; height: 100%; object-fit: cover; } .banner_destacados_wrapper .gallery_wrapper .owl-stage-outer .owl-stage .owl-item.active.center .item .content_wrapper .content_title .title { font-size: 38px; line-height: 40px; } .banner_destacados_wrapper .gallery_wrapper .owl-stage-outer .owl-stage .owl-item.active.center .item .content_wrapper .content_title .title small { display: block; } .banner_destacados_wrapper .gallery_wrapper .owl-stage-outer .owl-stage .owl-item.active.center .item .links_wrapper { transform: translateX(0); transition-delay: 0.6s; } .banner_destacados_wrapper .gallery_wrapper .owl-stage-outer .owl-stage .owl-item.active.center .item::before { top: 300px; opacity: 1; } .banner_destacados_wrapper .gallery_wrapper .owl-stage-outer .owl-stage .owl-item.active.center:hover .item .content_wrapper .desc { max-height: 500px; overflow: hidden; margin-bottom: 0; } .banner_destacados_wrapper .gallery_wrapper .owl-dots { display: inline-flex; justify-content: center; align-items: center; position: absolute; left: 50%; bottom: -70px; transform: translateX(-50%); } .banner_destacados_wrapper .gallery_wrapper .owl-dots .owl-dot { position: relative; display: inline-block; vertical-align: middle; float: none; margin-right: 15px; width: 12px; height: 12px; border-radius: 50%; background-color: #DCD9D2; transition: all, 0.2s; } .banner_destacados_wrapper .gallery_wrapper .owl-dots .owl-dot:hover, .banner_destacados_wrapper .gallery_wrapper .owl-dots .owl-dot.active, .banner_destacados_wrapper .gallery_wrapper .owl-dots .owl-dot.selected { width: 7px; height: 7px; background-color: #FF08FF; } .banner_destacados_wrapper .gallery_wrapper .owl-dots .owl-dot:hover::before, .banner_destacados_wrapper .gallery_wrapper .owl-dots .owl-dot.active::before, .banner_destacados_wrapper .gallery_wrapper .owl-dots .owl-dot.selected::before { position: absolute; content: ""; top: -4px; bottom: -4px; left: -4px; right: -4px; border-radius: 50%; border: 1px solid #FF08FF; background-color: transparent; } </style> <script> $(document).ready(function(){ $('.owl-carousel').owlCarousel({ loop: true, center: true, nav: true, dots: true, items: 3, navText: ['<span></span>', '<span></span>'], autoplay: false }) }); </script> However, this results in no pictures being in my site and also the carousel doesn't seem to be working. https://www.unswaseanconference.com/about-asean-2021-v2 Anybody know what i'm doing wrong?

@Brent_Dickens How do I add css libraries and javascript files into the header page? Is it through the <script> tag for both?

@Brent_Dickens Hi, yes I have looked over the new Automated lists. However, I want my list carousel to be able to have the zoom in image effect like the one in codepen

I am trying to recreate this codepen code -- https://codepen.io/mdharo/pen/OJWeLKO -- into my site -- https://www.unswaseanconference.com/about-asean-2021-v2 -- by injecting it into a code block however the slider is not working and it is not horizontal. I also already compiled the SCSS code from codepen to CSS. Any help would be greatly appreciated

@tuanphan Did you figure out how to do that hover effect?

@tuanphan Hi, I used your code however, the overlay color doesnt show up. The caption seems to be working tho. Do you know whats the problem? https://www.unswaseanconference.com/about-asean-2021-v2

Hi, I have tried your code however, it is still not functioning like the one from codepen. When I click on a particular year, every other year just disappear. I also added the jquery script -- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> -- into the header code injection instead of the section injection

Hi @Agha_Waqas, this is the website: https://www.unswaseanconference.com/about-asean I want to add it under the blue banner that writes One Vision, One Identity, One Community. Do you know how to add it into a carousel?

Anybody know how to do a hover effect where the image is initially slightly dark but once the mouse hovers over it, the image zooms in an become brighter as in it becomes the original colour of the image. An example of this effect is in this youtube video: I want to create the hover effect he have on the 1:24 -1:30 mark of the video. Any help in this would be greatly appreciated

<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="author" content="Made with ❤ by Jorge Epuñan - @csslab"> <title>jQuery Timeline 0.9.54 - Dando vida al tiempo</title> <link rel="stylesheet" href="css/style.css" media="screen" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="js/jquery.timelinr-0.9.54.js"></script> <script> $(function(){ $().timelinr({ arrowKeys: 'true' }) }); </script> </head> <body> <div id="timeline"> <ul id="dates"> <li><a href="#1984">1984</a></li> <li><a href="#1987">1987</a></li> <li><a href="#1991">1991</a></li> <li><a href="#1992">1992</a></li> <li><a href="#1993">1993</a></li> <li><a href="#1995">1995</a></li> <li><a href="#1996">1996</a></li> <li><a href="#1997">1997</a></li> <li><a href="#1998">1998</a></li> <li><a href="#1999">1999</a></li> <li><a href="#2000">2000</a></li> <li><a href="#2001">2001</a></li> <li><a href="#2002">2002</a></li> <li><a href="#2004">2004</a></li> <li><a href="#2006">2006</a></li> <li><a href="#2007">2007</a></li> <li><a href="#2009">2009</a></li> <li><a href="#2014">2014</a></li> <li><a href="#2015">2015</a></li> <li><a href="#2016">2016</a></li> </ul> <ul id="issues"> <li id="1984"> <h1>1984</h1> <p>DKN Hotels founded with the acquisition of the Surf Motel Carlsbad, CA</p> <br> <p>Acquisition of the Marco Polo Inn Anaheim, CA (repositioned as: Days Inn)</p> </li> <li id="1987"> <h1>1987</h1> <p>Acquisition of the Park Vue Anaheim, CA (repositioned as: Econo Lodge)</p> </li> <li id="1991"> <h1>1991</h1> <p>Acquisition of the Quality Inn in Ontario, CA (repositioned as: Holiday Inn Express)</p> <br> <p>Construction of the Econo Lodge Flagstaff East, AZ (repositioned as: Days Inn)</p> </li> <li id="1992"> <h1>1992</h1> <p>Acquisition of the Sandman Inn Anaheim, CA (repositioned as: Ramada Limited)</p> </li> <li id="1993"> <h1>1993</h1> <p>Acquisition of the Summer House Inn in San Diego, CA</p> </li> <li id="1995"> <h1>1995</h1> <p>Acquisition of the Comfort Inn San Diego (repositioned as: Holiday Inn Express)</p> <br> <p>Acquisition of the Harbor Inn Anaheim, CA (repositioned as: Comfort Inn)</p> <br> <p>Construction of the Hampton Inn Flagstaff East (repositioned as: Country Inn & Suites) </p> </li> <li id="1996"> <h1>1996</h1> <p>Acquisition of the Travelodge Midway San Diego, CA</p> <br> <p>Acquisition of the Midway Motel in San Diego, CA (repositioned as: Travelodge SeaWorld)</p> </li> <li id="1997"> <h1>1997</h1> <p>Acquisition of the Newport Bay Inn in Costa Mesa, CA (repositioned as: Holiday Inn Express)</p> <br> <p>Acquisition of the Newport Beach Inn in Newport Beach, CA (repositioned as: Best Western)</p> <br> <p>Acquisition of he Travelodge in San Marcos, CA (repositioned as: Ramada Limited) </p> </li> <li id="1998"> <h1>1998</h1> <p>Acquisition of the Days Inn I-40 in Flagstaff, AZ</p> <br> <p>Acquisition of the Days Inn in San Diego, CA (repositioned as: Best Western)</p> <br> <p>Acquisition of the Del Norte Inn in Camarillo, CA (repositioned as: Holiday Inn Express)</p> <br> <p>Acquisition of the Quality Inn in Fresno, CA</p> </p> </li> <li id="1999"> <h1>1999</h1> <p>Acquisition of the Days Inn Route 66 in Flagstaff, AZ</p> <br> <p>Acquisition of the Quality Suites in San Clemente, CA (repositioned as: Hampton Inn & Suites)</p> <br> <p>Acquisition of the Conestoga Hotel in Anaheim, CA (repositioned as: Holiday Inn & Suites)</p> </p> </li> <li id="2000"> <h1>2000</h1> <p>Acquisition of the Best Western Desert Villa Inn in Barstow, CA</p> </li> <li id="2001"> <h1>2001</h1> <p>Acquisition of the Newport Classic Inn in Newport Beach, CA (repositioned as: Holiday Inn Express)</p> <br> <p>Acquisition of the Goodnite Inn in Ontario, CA</p> <br> <p>Acquisition of the Laguna Beach Inn in Laguna Beach, CA</p> </li> <li id="2002"> <h1>2002</h1> <p>Acquisition of the Best Western Westwood Hotel in Los Angeles, CA (repositioned as: Holiday Inn Express)</p> <br> <p>Acquisition of the Super 8 Motel in Flagstaff, AZ</p> <br> <p>Acquisition of the Best Western Raffles Inn in Anaheim, CA</p> </li> <li id="2004"> <h1>2004</h1> <p>Acquisition of the Fairfield Inn in Buena Park, CA </p> <br> <p>Acquisition of the Heritage Hotel in Sacramento, CA (repositioned as Courtyard Inn and Fairfield Inn)</p> <br> <p>Construction of the New Town Place in Sacramento, CA</p> <br> <p>Acquisition of the Fairfield Inn in Placentia, CA (repositioned as: Quality Inn)</p> </li> <li id="2006"> <h1>2006</h1> <p>Acquisition of the Amerisuites Hotel in Ontario, CA (repositioned as: Hyatt Place)</p> </li> <li id="2007"> <h1>2007</h1> <p>Acquisitioon of the Country Plaza Inn in San Clemente, CA (repositioned as: Holiday Inn Express)</p> </li> <li id="2009"> <h1>2009</h1> <p>Construction of the Hilton Garden Inn in San Bernardino, CA</p> </li> <li id="2014"> <h1>2014</h1> <p>Construction of the SpringHill Suites Anaheim Maingate in Anaheim, CA</p> <br> <p>Acquisition of the Cardiff-by-the-Sea Lodge in Cardiff-by-the-Sea, CA</p> <br> <p>Acquisition of the Hilton Hotel in San Bernardino, CA (repositioned as: DoubleTree)</p> </li> <li id="2015"> <h1>2015</h1> <p>Acquisition of the Wyndham Garden Ventura Pierpont Inn in Ventura, CA</p> <br> <p>Construction of the Residence Inn in Rancho Cucamonga, CA</p> <br> <p>Construction of the Hampton Inn & Suites in Murrietta, CA</p> <br> <p>Construction of the Homewood Suites in Irvine, CA</p> </li> <li id="2016"> <h1>2016</h1> <p>Construction of the SpringHill Suites in Carlsbad, CA</p> </li> </ul> <div id="grad_left"></div> <div id="grad_right"></div> <a href="#" id="next">+</a> <a href="#" id="prev">-</a> </div> </body> <style> * { margin: 0; padding: 0; } body { background: #222; font-family: Georgia, serif; color: #fff; font-size: 14px; } a { color: #ffffcc; text-decoration: none; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s; transition: 0.5s; } a:hover, a.selected { color: #ffcc00; } h1, h2, h4, h5, h6 { text-align: center; color: #ccc; text-shadow: #000 1px 1px 2px; margin-bottom: 5px; } h1 { font-size: 18px; } h2 { font-size: 14px; } .sociales { text-align: center; margin-bottom: 20px; } #timeline { width: 800px; height: 350px; overflow: hidden; margin: 100px auto; position: relative; background: url('../images/dot.gif') left 45px repeat-x; } #dates { width: 800px; height: 60px; overflow: hidden; } #dates li { list-style: none; float: left; width: 100px; height: 50px; font-size: 24px; text-align: center; background: url('../images/biggerdot.png') center bottom no-repeat; } #dates a { line-height: 38px; padding-bottom: 10px; } #dates .selected { font-size: 38px; } #issues { width: 800px; height: 350px; overflow: hidden; } #issues li { width: 800px; height: 350px; list-style: none; float: left; } #issues li.selected img { -webkit-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } #issues li img { float: left; margin: 10px 30px 10px 50px; background: transparent; -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE 8 */ filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF, endColorstr=#00FFFFFF); /* IE 6 & 7 */ zoom: 1; -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; transition: all 2s ease-in-out; -webkit-transform: scale(0.7, 0.7); -moz-transform: scale(0.7, 0.7); -o-transform: scale(0.7, 0.7); -ms-transform: scale(0.7, 0.7); transform: scale(0.7, 0.7); } #issues li h1 { color: #ffcc00; font-size: 48px; margin: 20px 0; text-shadow: #000 1px 1px 2px; text-align: left; padding-left: 70px; } #issues li p { font-size: 14px; margin-right: 70px; margin-left: 70px; font-weight: normal; line-height: 22px; text-shadow: #000 1px 1px 2px; } #grad_left, #grad_right { width: 100px; height: 350px; position: absolute; top: 0; } #grad_left { left: 0; background: url('../images/grad_left.png') repeat-y; } #grad_right { right: 0; background: url('../images/grad_right.png') repeat-y; } #next, #prev { position: absolute; top: 0; font-size: 70px; top: 170px; width: 22px; height: 38px; background-position: 0 0; background-repeat: no-repeat; text-indent: -9999px; overflow: hidden; } #next:hover, #prev:hover { background-position: 0 -76px; } #next { right: 0; background: red; } #prev { left: 0; background: blue; } #next.disabled, #prev.disabled { opacity: 0.2; } </style> <script> /* ---------------------------------- jQuery Timelinr 0.9.54 tested with jQuery v1.6+ Copyright 2011, CSSLab.cl Free under the MIT license. https://www.opensource.org/licenses/mit-license.php instructions: http://www.csslab.cl/2011/08/18/jquery-timelinr/ ---------------------------------- */ jQuery.fn.timelinr = function(options){ // default plugin settings settings = jQuery.extend({ orientation: 'horizontal', // value: horizontal | vertical, default to horizontal containerDiv: '#timeline', // value: any HTML tag or #id, default to #timeline datesDiv: '#dates', // value: any HTML tag or #id, default to #dates datesSelectedClass: 'selected', // value: any class, default to selected datesSpeed: 'normal', // value: integer between 100 and 1000 (recommended) or 'slow', 'normal' or 'fast'; default to normal issuesDiv: '#issues', // value: any HTML tag or #id, default to #issues issuesSelectedClass: 'selected', // value: any class, default to selected issuesSpeed: 'fast', // value: integer between 100 and 1000 (recommended) or 'slow', 'normal' or 'fast'; default to fast issuesTransparency: 0.2, // value: integer between 0 and 1 (recommended), default to 0.2 issuesTransparencySpeed: 500, // value: integer between 100 and 1000 (recommended), default to 500 (normal) prevButton: '#prev', // value: any HTML tag or #id, default to #prev nextButton: '#next', // value: any HTML tag or #id, default to #next arrowKeys: 'false', // value: true | false, default to false startAt: 1, // value: integer, default to 1 (first) autoPlay: 'false', // value: true | false, default to false autoPlayDirection: 'forward', // value: forward | backward, default to forward autoPlayPause: 2000 // value: integer (1000 = 1 seg), default to 2000 (2segs) }, options); $(function(){ // setting variables... many of them var howManyDates = $(settings.datesDiv+' li').length; var howManyIssues = $(settings.issuesDiv+' li').length; var currentDate = $(settings.datesDiv).find('a.'+settings.datesSelectedClass); var currentIssue = $(settings.issuesDiv).find('li.'+settings.issuesSelectedClass); var widthContainer = $(settings.containerDiv).width(); var heightContainer = $(settings.containerDiv).height(); var widthIssues = $(settings.issuesDiv).width(); var heightIssues = $(settings.issuesDiv).height(); var widthIssue = $(settings.issuesDiv+' li').width(); var heightIssue = $(settings.issuesDiv+' li').height(); var widthDates = $(settings.datesDiv).width(); var heightDates = $(settings.datesDiv).height(); var widthDate = $(settings.datesDiv+' li').width(); var heightDate = $(settings.datesDiv+' li').height(); // set positions! if(settings.orientation == 'horizontal') { $(settings.issuesDiv).width(widthIssue*howManyIssues); $(settings.datesDiv).width(widthDate*howManyDates).css('marginLeft',widthContainer/2-widthDate/2); var defaultPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0,$(settings.datesDiv).css('marginLeft').indexOf('px'))); } else if(settings.orientation == 'vertical') { $(settings.issuesDiv).height(heightIssue*howManyIssues); $(settings.datesDiv).height(heightDate*howManyDates).css('marginTop',heightContainer/2-heightDate/2); var defaultPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0,$(settings.datesDiv).css('marginTop').indexOf('px'))); } $(settings.datesDiv+' a').click(function(event){ event.preventDefault(); // first vars var whichIssue = $(this).text(); var currentIndex = $(this).parent().prevAll().length; // moving the elements if(settings.orientation == 'horizontal') { $(settings.issuesDiv).animate({'marginLeft':-widthIssue*currentIndex},{queue:false, duration:settings.issuesSpeed}); } else if(settings.orientation == 'vertical') { $(settings.issuesDiv).animate({'marginTop':-heightIssue*currentIndex},{queue:false, duration:settings.issuesSpeed}); } $(settings.issuesDiv+' li').animate({'opacity':settings.issuesTransparency},{queue:false, duration:settings.issuesSpeed}).removeClass(settings.issuesSelectedClass).eq(currentIndex).addClass(settings.issuesSelectedClass).fadeTo(settings.issuesTransparencySpeed,1); // prev/next buttons now disappears on first/last issue | bugfix from 0.9.51: lower than 1 issue hide the arrows | bugfixed: arrows not showing when jumping from first to last date if(howManyDates == 1) { $(settings.prevButton+','+settings.nextButton).fadeOut('fast'); } else if(howManyDates == 2) { if($(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass)) { $(settings.prevButton).fadeOut('fast'); $(settings.nextButton).fadeIn('fast'); } else if($(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass)) { $(settings.nextButton).fadeOut('fast'); $(settings.prevButton).fadeIn('fast'); } } else { if( $(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass) ) { $(settings.nextButton).fadeIn('fast'); $(settings.prevButton).fadeOut('fast'); } else if( $(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass) ) { $(settings.prevButton).fadeIn('fast'); $(settings.nextButton).fadeOut('fast'); } else { $(settings.nextButton+','+settings.prevButton).fadeIn('slow'); } } // now moving the dates $(settings.datesDiv+' a').removeClass(settings.datesSelectedClass); $(this).addClass(settings.datesSelectedClass); if(settings.orientation == 'horizontal') { $(settings.datesDiv).animate({'marginLeft':defaultPositionDates-(widthDate*currentIndex)},{queue:false, duration:'settings.datesSpeed'}); } else if(settings.orientation == 'vertical') { $(settings.datesDiv).animate({'marginTop':defaultPositionDates-(heightDate*currentIndex)},{queue:false, duration:'settings.datesSpeed'}); } }); $(settings.nextButton).bind('click', function(event){ event.preventDefault(); // bugixed from 0.9.54: now the dates gets centered when there's too much dates. var currentIndex = $(settings.issuesDiv).find('li.'+settings.issuesSelectedClass).index(); if(settings.orientation == 'horizontal') { var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginLeft').substring(0,$(settings.issuesDiv).css('marginLeft').indexOf('px'))); var currentIssueIndex = currentPositionIssues/widthIssue; var currentPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0,$(settings.datesDiv).css('marginLeft').indexOf('px'))); var currentIssueDate = currentPositionDates-widthDate; if(currentPositionIssues <= -(widthIssue*howManyIssues-(widthIssue))) { $(settings.issuesDiv).stop(); $(settings.datesDiv+' li:last-child a').click(); } else { if (!$(settings.issuesDiv).is(':animated')) { // bugixed from 0.9.52: now the dates gets centered when there's too much dates. $(settings.datesDiv+' li').eq(currentIndex+1).find('a').trigger('click'); } } } else if(settings.orientation == 'vertical') { var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginTop').substring(0,$(settings.issuesDiv).css('marginTop').indexOf('px'))); var currentIssueIndex = currentPositionIssues/heightIssue; var currentPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0,$(settings.datesDiv).css('marginTop').indexOf('px'))); var currentIssueDate = currentPositionDates-heightDate; if(currentPositionIssues <= -(heightIssue*howManyIssues-(heightIssue))) { $(settings.issuesDiv).stop(); $(settings.datesDiv+' li:last-child a').click(); } else { if (!$(settings.issuesDiv).is(':animated')) { // bugixed from 0.9.54: now the dates gets centered when there's too much dates. $(settings.datesDiv+' li').eq(currentIndex+1).find('a').trigger('click'); } } } // prev/next buttons now disappears on first/last issue | bugfix from 0.9.51: lower than 1 issue hide the arrows if(howManyDates == 1) { $(settings.prevButton+','+settings.nextButton).fadeOut('fast'); } else if(howManyDates == 2) { if($(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass)) { $(settings.prevButton).fadeOut('fast'); $(settings.nextButton).fadeIn('fast'); } else if($(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass)) { $(settings.nextButton).fadeOut('fast'); $(settings.prevButton).fadeIn('fast'); } } else { if( $(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass) ) { $(settings.prevButton).fadeOut('fast'); } else if( $(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass) ) { $(settings.nextButton).fadeOut('fast'); } else { $(settings.nextButton+','+settings.prevButton).fadeIn('slow'); } } }); $(settings.prevButton).click(function(event){ event.preventDefault(); // bugixed from 0.9.54: now the dates gets centered when there's too much dates. var currentIndex = $(settings.issuesDiv).find('li.'+settings.issuesSelectedClass).index(); if(settings.orientation == 'horizontal') { var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginLeft').substring(0,$(settings.issuesDiv).css('marginLeft').indexOf('px'))); var currentIssueIndex = currentPositionIssues/widthIssue; var currentPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0,$(settings.datesDiv).css('marginLeft').indexOf('px'))); var currentIssueDate = currentPositionDates+widthDate; if(currentPositionIssues >= 0) { $(settings.issuesDiv).stop(); $(settings.datesDiv+' li:first-child a').click(); } else { if (!$(settings.issuesDiv).is(':animated')) { // bugixed from 0.9.54: now the dates gets centered when there's too much dates. $(settings.datesDiv+' li').eq(currentIndex-1).find('a').trigger('click'); } } } else if(settings.orientation == 'vertical') { var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginTop').substring(0,$(settings.issuesDiv).css('marginTop').indexOf('px'))); var currentIssueIndex = currentPositionIssues/heightIssue; var currentPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0,$(settings.datesDiv).css('marginTop').indexOf('px'))); var currentIssueDate = currentPositionDates+heightDate; if(currentPositionIssues >= 0) { $(settings.issuesDiv).stop(); $(settings.datesDiv+' li:first-child a').click(); } else { if (!$(settings.issuesDiv).is(':animated')) { // bugixed from 0.9.54: now the dates gets centered when there's too much dates. $(settings.datesDiv+' li').eq(currentIndex-1).find('a').trigger('click'); } } } // prev/next buttons now disappears on first/last issue | bugfix from 0.9.51: lower than 1 issue hide the arrows if(howManyDates == 1) { $(settings.prevButton+','+settings.nextButton).fadeOut('fast'); } else if(howManyDates == 2) { if($(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass)) { $(settings.prevButton).fadeOut('fast'); $(settings.nextButton).fadeIn('fast'); } else if($(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass)) { $(settings.nextButton).fadeOut('fast'); $(settings.prevButton).fadeIn('fast'); } } else { if( $(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass) ) { $(settings.prevButton).fadeOut('fast'); } else if( $(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass) ) { $(settings.nextButton).fadeOut('fast'); } else { $(settings.nextButton+','+settings.prevButton).fadeIn('slow'); } } }); // keyboard navigation, added since 0.9.1 if(settings.arrowKeys=='true') { if(settings.orientation=='horizontal') { $(document).keydown(function(event){ if (event.keyCode == 39) { $(settings.nextButton).click(); } if (event.keyCode == 37) { $(settings.prevButton).click(); } }); } else if(settings.orientation=='vertical') { $(document).keydown(function(event){ if (event.keyCode == 40) { $(settings.nextButton).click(); } if (event.keyCode == 38) { $(settings.prevButton).click(); } }); } } // default position startAt, added since 0.9.3 $(settings.datesDiv+' li').eq(settings.startAt-1).find('a').trigger('click'); // autoPlay, added since 0.9.4 if(settings.autoPlay == 'true') { setInterval("autoPlay()", settings.autoPlayPause); } }); }; // autoPlay, added since 0.9.4 function autoPlay(){ var currentDate = $(settings.datesDiv).find('a.'+settings.datesSelectedClass); if(settings.autoPlayDirection == 'forward') { if(currentDate.parent().is('li:last-child')) { $(settings.datesDiv+' li:first-child').find('a').trigger('click'); } else { currentDate.parent().next().find('a').trigger('click'); } } else if(settings.autoPlayDirection == 'backward') { if(currentDate.parent().is('li:first-child')) { $(settings.datesDiv+' li:last-child').find('a').trigger('click'); } else { currentDate.parent().prev().find('a').trigger('click'); } } } </script> I am trying to recreate this timeline from codepen.io --https://codepen.io/Naasa21/pen/qdxKMo/ . But it is not working as expected. My code does dynamically move the timeline like the one from codepen. Any help would be greatly appreciated.