Creating a Custom Carousel

[RGrimsley]

Hey, folks!

After hours of fooling around, I was finally able to find the right code placement to get my content on one line. There are currently 7 posts being featured. Now, I'm really struggling with:

1. Getting the content to loop (after 7)
2. Once that's done, getting the most recent post to be featured in the middle of the page

Here's my current CSS:

.section-title-3 {
font-family: roobert-bold;
font-size: 32px;
line-height: 1.2em;
text-align: left;
width: 100%;
margin-left: 30px;
margin-top: 30px;
margin-bottom: 10px;
color: #1e2d39;
}
.section-title-3 a {
overflow: hidden;
position: relative;
display: inline-block;
}

.section-title-3 a::before,
.section-title-3 a::after {
content: '';
position: absolute;
width: 52%;
left: 0;
}
.section-title-3 a::before {
background-color: #426270;
height: 2px;
bottom: 0;
transform-origin: 100% 50%;
transform: scaleX(0);
transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);
}
.section-title-3 a::after {
content: attr(data-replace);
height: 100%;
top: 0;
transform-origin: 100% 50%;
transform: translate3d(200%, 0, 0);
transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);
color: #426270;
}

.section-title-3 a:hover::before {
color: #1e2d39;
transform-origin: 0% 50%;
transform: scaleX(1);
}
.section-title-3 a:hover::after {
transform: translate3d(0, 0, 0);
}

.section-title-3 a span {
color: #1e2d39;
display: inline-block;
transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);
}

.section-title-3 a:hover span {
transform: translate3d(-200%, 0, 0);
}

.listing-columns-wrap .content-wrapper {
padding-top: 0px;
padding-bottom: 0px;
padding-right: -100px;
padding-left: -100px;
margin: auto;
}
.listing-columns-wrap .row {
padding-left: 0;
padding-right: 0;
float: none;
}
.listing-carousel-wrap .blog-index-wrap {
display: flex;
flex-wrap: nowrap;
width: 3000px;
margin: auto;
}
.listing-carousel-wrap .blog-index-wrap:after, .listing-main-wrap .blog-index-wrap:before {
content: "";
display: inline-block;
clear: both;
}
.listing-carousel-wrap .blog-index-wrap .post-items-3 {
transition: box-shadow .2s;
float: middle;
margin-bottom: 1%;
margin-right: 1%;
position: relative;
width: 31.77%;
min-height: 473px;
background: #e8eceb;
justify-content: center;
overflow: hidden;
}
.listing-carousel-wrap .blog-index-wrap .post-items-3:hover {
box-shadow: 0 0 13px rgba(33,33,33,.2);
}
.listing-carousel-wrap .blog-index-wrap .post-items-3:hover .summary-title{
font-family: roobert-bold;
}
.listing-carousel-wrap .blog-index-wrap .post-items-3:nth-child(3n) {
margin-right: 1%;
}
.listing-carousel-wrap .summary-thumbnail-outer-container {
position: relative;
}
.listing-carousel-wrap a.gallery-image-container {
margin: 15px;
display: block;
}
.listing-carousel-wrap a.gallery-image-container .summary-thumbnail.img-wrapper {
overflow: hidden;
padding-bottom: 66.6667%;
position: relative;
width: 100%;
height: auto;
}
.listing-carousel-wrap a.gallery-image-container .summary-thumbnail.img-wrapper img {
position: absolute;
font-size: 13px;
line-height: normal;
transition: .6s opacity;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.listing-carousel-wrap .summary-content.gallery-meta-container .summary-title {
font-size: 20px;
line-height: 1.2em;
text-align: left;
font-family: roobert-semibold;
margin: 15px;
}
.listing-carousel-wrap .summary-content.gallery-meta-container .summary-title a.summary-title-link {
color: #1e2d39;
}
.listing-columns-wrap .summary-excerpt.summary-excerpt-only {
margin: 15px;
}
.listing-carousel-wrap .summary-excerpt.summary-excerpt-only p {
font-size: 14px;
line-height: 1.4em;
margin: 0;
text-align: left;
font-family: roobert-light;
margin: 15px
}
.listing-carousel-wrap .container--below-content {
font-size: 13px;
line-height: normal;
padding-bottom: 15px;
}
.listing-carousel-wrap .container--below-content .summary-metadata-item--date {
color: #1e2d39;
opacity: .7;
margin: 15px;
font-size: 13px;
line-height: 1.4em;
text-transform: none;
font-family: roobert-regular;

}

@media(max-width: 767px){
.listing-carousel-wrap .blog-index-wrap .post-items-3 {
float: left;
margin-bottom: 3.18182%;
margin-right: 0;
min-height: unset;
position: relative;
width: 100%;
}
.listing-carousel-wrap .content-wrapper{
padding: 35px 36px 0;
}
}

@media(max-width: 640px){
.listing-carousel-wrap .content-wrapper{
padding: 35px 20px 0;
}
}

Here's the HTML:

<div class="listing-carousel-wrap">
<div class="section-title-3">
<a href="https://www.ichorstrategies.com/recent-insights/" data-replace="Read More">
<span>
{% inline_text field="section_title" value="{{ module.section_title }}" %}
</span>
</a>
</div>
<div class="content-wrapper">
<div class="row">
<section class="blog-index-wrap">

{% set author_posts = blog_recent_author_posts(module.select_blog, "eric-eve", 7) %}
{% for author_post in author_posts %}

<div class="post-items-3">
{% if author_post.featured_image %}
<div class="summary-thumbnail-outer-container">
<a href="{{ author_post.absolute_url }}" class="gallery-image-container">
<div class="summary-thumbnail img-wrapper">
<img src="{{ author_post.featured_image }}" alt="{{ author_post.name }}">
</div>
</a>
</div>
{% endif %}

<div class="summary-content gallery-meta-container">
<div class="summary-title">
<a href="{{ author_post.absolute_url }}" class="summary-title-link">{{ author_post.name }}</a>
</div>
<div class="summary-excerpt summary-excerpt-only">
<p>
{{ author_post.post_list_content|truncatehtml(300)|striptags|safe }}
</p>
</div>
<div class="container--below-content">
<div class="summary-metadata--primary">
<time class="summary-metadata-item summary-metadata-item--date">{{ author_post.publish_date_local_time.strftime('%b %d, %Y') }}</time>
</div>
</div>
</div>
</div>
{% endfor %}

</section>
</div>
</div>
</div>

If someone can help me with this, YOU WILL BE A LIFESAVER!!!

[Anton]

Hi @RGrimsley, 

I'd highly recommend you to use one of the available carousel frameworks available out in the wild since they 

Two of the frameworks I can recommend are:

- swiper.js

- slick slider

an implementation of swiper.js could look like this

html+Hubl

{% require_head %}
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />

  <!-- Demo styles -->
  <style>
    html,
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .swiper {
      margin-left: auto;
      margin-right: auto;
    }
  </style>
{% end_require_head %}

{% require_js %}
  <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
  <script>
    var swiper = new Swiper(".mySwiper", {
      slidesPerView: 1,
      spaceBetween: 30,
      loop: true,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });
  </script>
{% end_require_js %}

{# start module layout #}
<div class="swiper mySwiper">
    <div class="swiper-wrapper">
      {% for single_slide in module.slides %}<div class="swiper-slide">
{# your content/layout of each slide goes here #}
</div>
{% endfor %}
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-pagination"></div>
  </div>
{# end module layout #}

for more options like responsive breakpoints you can check out the demos. If you want one of the functions like breakpoints, you can simply copy/paste the snippet into the JS part. 

So this

<script>
    var swiper = new Swiper(".mySwiper", {
      slidesPerView: 1,
      spaceBetween: 30,
      loop: true,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });
  </script>

becomes this:

<script>
    var swiper = new Swiper(".mySwiper", {
      slidesPerView: 1,
      spaceBetween: 30,
      loop: true,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
breakpoints: {
        640: {
          slidesPerView: 2,
          spaceBetween: 20,
        },
        768: {
          slidesPerView: 4,
          spaceBetween: 40,
        },
        1024: {
          slidesPerView: 5,
          spaceBetween: 50,
        },
      }
    });
  </script>

hope that helps

best, 

Anton