Image Gallery Carousel Slider in Cargo Site

image gallery slider in cargo site

Are you looking to create an image gallery slider on your Cargo site?

An image gallery lets you add photos in rows and columns. This allows you to display more photos in less space while making it easier for users to browse them.

This article will show you how to easily create an image gallery slider on your Cargo site that makes your photos look even better.

Why Create an Image Gallery on your Cargo site?

Cargo site makes it super easy to add an image to your pages. You need to add the Image block and upload your image.

However, if you are adding multiple images to your Cargo website, then all those images will appear one after another. It doesn’t look great, and your users will have to scroll a lot to view them all.

By adding a slider you will be able to show more photos in less space, and it will look a lot more professional.

For example, if you are creating a photography website to display your images, then adding a photo gallery allows you to showcase your work in an aesthetically pleasing way.

In Cargo, we can easily create a full-screen image gallery using CArgo default settings but to create an image grid slider we have to create it manually using HTML, CSS, and a little bit of JS.

Image Gallery Carousel Slider in Cargo 3

  1. Open Cargo 3 and create a new page where you’d like to feature an image gallery slider. Upload the images you wish to include in this slider.
image gallery slider in cargo site

2. Open the image in a new tab and copy its URL. We’ll need these URLs in the next step to replace them in the HTML as the image sources (src).

image gallery slider in cargo site

3. Go to the local page editor by clicking on the CODE icon at the top, then navigate to the HTML section and paste the code below.

CODE –

<div style="text-align: center"><h1>IMAGE SLIDER</h1></div>

<div class="slider" id="slider">
    <div class="slider__track">
      <ul class="slider__list">
        <li class="slider__slide"><img src="https://freight.cargo.site/t/original/i/Q1829953481601732596243263360639/pexels-wendelinjacober-1460222.jpg"></li>
        <li class="slider__slide"><img src="https://freight.cargo.site/t/original/i/B1829953481583285852169553809023/pexels-mrwson-4275885.jpg"></li>
        <li class="slider__slide"><img src="https://freight.cargo.site/t/original/i/X1829953481564839108095844257407/pexels-chriispr-2884864.jpg"></li>
        <li class="slider__slide"><img src="https://freight.cargo.site/t/original/i/R1829953481546392364022134705791/pexels-mrwson-4275890.jpg"></li>
      </ul>
    </div>
  </div>


<div style="text-align: center"><span style="--font-scale: 2.09;">This is image slider</span></div>

NOTE – Make sure to replace the image URL with your image which we have copied earlier

image gallery slider in cargo site

Now switch to the CSS tab and paste the CSS code provided below.

 .slider {
    padding: 20px 0;
  }
  
  .slider {
    padding: 20px 0;
  }
  
  .slider__slide img {
    display: block;
    width: 100%;
    border-radius: 8px;
    transition: transform 400ms;
    transform: scale(0.9);
    transform-origin: center center;
  }
  
  .slider__slide.is-active img {
    transform: scale(1);
  }
  
  .slider .slider__arrow {
    top: 0;
    bottom: 0;
    height: 100%;
    transform: none;
    border-radius: unset;
    width: 50px;
    opacity: 0.9;
    clip-path: circle(0%);
  }
  .slider .slider__arrow svg {
    filter: invert(1);
    width: 24px;
    height: 24px;
  }
  
  .slider__arrow.slider__arrow--prev {
    left: 0;
    background: none;
  }
  
  .slider__arrow.slider__arrow--next {
    right: 0;
    background: none;
  }
  
  a {
    color: #fff;
    padding: 4px 8px;
  }
  
  section {
    max-width: 700px;
    margin: 0 auto;
  }
  
  .left {
    text-align: left;
  }
image gallery slider in cargo site

5. Now navigate to the global code editor and paste the JS code provided below.

<link
  rel="stylesheet" href="https://freight.cargo.site/m/B1829896035120273131431811845759/slider.min.css"
/>
  <script src=" https://freight.cargo.site/m/E18299071954926714460790/slider.min.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    new Slider('#slider', {
      type: 'loop',
      perPage: 3,
      focus: 'center',
      autoplay: true,
      interval: 3000,
      flickMaxPages: 3,
      updateOnMove: true,
      pagination: true,
      padding: '10%',
      throttle: 300,
      breakpoints: {
        1440: {
          perPage: 2,
          padding: '20%'
        },
        768: {
          perPage: 1,
          padding: '0%'
        }
      }
    }).mount();


  });
</script>
image gallery slider in cargo site

6. Now open the page in a new tab to view the image gallery slider. Please note that it will only display on the live site and not in the editor.

image gallery slider in cargo site

Conclusion

After following these steps, you should now have successfully set up an image gallery slider on your Cargo 3 page. Remember, the slider will be visible when you view the live site, but it won’t display within the editor interface. This setup allows you to showcase your images in an interactive and visually appealing manner on your website.

Thanks for reading the blog.🚀

Similar Posts