Jump to content

Will123

Member
  • Posts

    21
  • Joined

  • Last visited

Will123's Achievements

  1. 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).
  2. hi @tuanphan, the caption is already there. Its under the flags
  3. 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
  4. 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.
  5. 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
  6. @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>
  7. 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
  8. 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?
  9. @Brent_Dickens How do I add css libraries and javascript files into the header page? Is it through the <script> tag for both?
  10. @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
  11. 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
  12. @tuanphan Did you figure out how to do that hover effect?
  13. @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
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.