Creating a Custom Carousel

RGrimsley — Sun, 05 Feb 2023 02:24:54 GMT

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:

Getting the content to loop (after 7)
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!!!

Re: Creating a Custom Carousel

Anton — Mon, 06 Feb 2023 11:29:54 GMT

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" />  <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

becomes this:

hope that helps

best,

Anton

topic Re: Creating a Custom Carousel in CMS Development

Creating a Custom Carousel

Re: Creating a Custom Carousel