Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Really need help with this custom code


Will123

Question

  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

4 answers to this question

Recommended Posts

  • 0

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). 

image.thumb.png.3d079184564296f031f02a2b370cfbfa.png

 

 

Link to comment
  • 0
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). 

image.thumb.png.3d079184564296f031f02a2b370cfbfa.png

 

 

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?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...