Really need help with this custom code

Will123 · August 9, 2021

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

Brent_Dickens · August 9, 2021

Digging into the setting for that Codepen you may need to include some extra scripts and css in the header of your page. Click the Settings button top right to see them all, there are two javascript files and two css libraries which may all slow down your page load.

Have you tried using the new Automated lists in Squarespace 7.1, there is one that will work well as a carousel similar to what you are looking for (Bottom right one could do the trick).

Will123 · August 10, 2021

@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

Will123 · August 10, 2021

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

Will123 · August 10, 2021

9 hours ago, Brent_Dickens said:

Digging into the setting for that Codepen you may need to include some extra scripts and css in the header of your page. Click the Settings button top right to see them all, there are two javascript files and two css libraries which may all slow down your page load.

Have you tried using the new Automated lists in Squarespace 7.1, there is one that will work well as a carousel similar to what you are looking for (Bottom right one could do the trick).

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?

Really need help with this custom code

Recommended Posts

Will123

Brent_Dickens

Will123

Will123

Will123

Archived

Circle Benefits

Events

Circle Day

Resources

Product Updates

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources