Jump to content
Join us live on Dec. 11 as we discuss the most-anticipated designs of 2025 with three brand design experts. ×

Really need help with this custom code

By Will123, in Customize with code

Recommended Posts

Will123 Level 4

Will123

Posted
Posted

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

 

  • Replies 5
  • Views 534
  • Created
  • Last Reply
Will123 Level 4

Will123

Posted
  • Author
Posted
On 8/14/2021 at 5:40 PM, tuanphan said:

Hi. Which code did you add to your site? Can you past here?

@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>

 

tuanphan Level 18

tuanphan

Posted
Posted

Try adding this to Code Block 

<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>
<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>
<style>
  @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>
<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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Will123 Level 4

Will123

Posted
  • Author
Posted
8 hours ago, tuanphan said:

Try adding this to Code Block 

<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>
<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>
<style>
  @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>
<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>

 

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

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources