# Horizontal-scrolling-slider

**URL:** <https://forum.pinegrow.com/t/horizontal-scrolling-slider/5207>\
**Category:** General\
**Created:** [April 18, 2021, 3:22am UTC](https://forum.pinegrow.com/t/horizontal-scrolling-slider/5207 "2021-04-18T03:22:48Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![randyrie](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/randyrie/32/2103_2.png) [@randyrie](https://forum.pinegrow.com/u/randyrie)\
**Post date:** [April 18, 2021, 3:22am UTC](https://forum.pinegrow.com/t/horizontal-scrolling-slider/5207/1 "2021-04-18T03:22:48Z")

</div>

Is there a feature in PineGrow that I can use to create some form of a horizontal scrolling container so I can have columns scroll in and out of view on my webpage?

I see this feature on many commerce webpages (see example below) now and would like to learn how to create this - it would simplify content on a site that I’m currently designing. (See example screen shot)

 ![Screen Shot 2021-04-17 at 10.53.21 PM](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/e/e56b466306e6c608180563ae93e857d3f862b09c.jpeg)

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [April 18, 2021, 9:50am UTC](https://forum.pinegrow.com/t/horizontal-scrolling-slider/5207/2 "2021-04-18T09:50:56Z")

</div>

Hi @randyrie,  
Well, there are a couple of different ways to accomplish this. It partially depends on what framework (if any) you want to use and what functions you want. Auto-scroll, only scroll on arrow click, normal swipe scrolling… What are you thinking?  
Cheers,  
Bob

---

<div class="post-metadata">

**Author:** ![randyrie](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/randyrie/32/2103_2.png) [@randyrie](https://forum.pinegrow.com/u/randyrie)\
**Post date:** [April 18, 2021, 4:04pm UTC](https://forum.pinegrow.com/t/horizontal-scrolling-slider/5207/3 "2021-04-18T16:04:05Z")

</div>

I prefer to use Bootstrap 4 within PG. ‘Only scroll on arrow-click’ is what I had in mind @RobM. I would appreciate it if you could step me through how to do this? Or direct me to a ‘how-to’ site?

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [April 18, 2021, 5:52pm UTC](https://forum.pinegrow.com/t/horizontal-scrolling-slider/5207/4 "2021-04-18T17:52:59Z")

</div>

I’ll write a little something up very soon. Too many windows to reglaze today. Sorry!!

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [April 19, 2021, 11:21am UTC](https://forum.pinegrow.com/t/horizontal-scrolling-slider/5207/5 "2021-04-19T11:21:14Z")

</div>

Hi @randyrie,  
Days are still too packed. However, there are a number of good tutorials/code examples out there. I searched for “Bootstrap product carousel”. This one seems pretty close to what you want. [Bootstrap 4 Best selling products with carousel slider Example](https://bbbootstrap.com/snippets/best-selling-products-carousel-slider-92645788)  
To prevent it from auto-sliding, remove the `data-ride` attribute and add the `data-interval="false"` attribute/value to the top carousel div.  
You will also have to play with columns a little to get your slide navigation placed to the sides.  
Let me know if this helps,  
Bob

---

<div class="post-metadata">

**Author:** ![randyrie](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/randyrie/32/2103_2.png) [@randyrie](https://forum.pinegrow.com/u/randyrie)\
**Post date:** [April 22, 2021, 6:43am UTC](https://forum.pinegrow.com/t/horizontal-scrolling-slider/5207/6 "2021-04-22T06:43:46Z")

</div>

Thanks for posting the slider example @RobM. I downloaded the various components, added them to my site and have posted the website I am working on. The page I’m trying (unsuccessfully) to add the slider to is the [organizations](http://rjrwebz.com/weather/organizations.html) page but the [slider.html](https://rjrwebz.com/weather/slider.html) page is a simpler page without my template & CSS added. (I have about 10 more agency images I want to add to the slider once I get it working). I’m still unsure how to implement the CSS, JS and HTML properly from the example you offered. Any idea what I’ve done wrong?

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [April 22, 2021, 9:33am UTC](https://forum.pinegrow.com/t/horizontal-scrolling-slider/5207/7 "2021-04-22T09:33:42Z")

</div>

Hey @randyrie,  
Sorry for you struggles. I’ll try to give you a few pointers later. Mainly, you want to move each of your current images to within the owl items. Make sure you have the Owl scripts added to the page - the three at the top in the HTML page. It looks like you can manage the CSS. See if you can do that and then I’ll write you a little JavaScript to make the navigation work.  
Cheers,  
Bob

---

<div class="post-metadata">

**Author:** ![randyrie](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/randyrie/32/2103_2.png) [@randyrie](https://forum.pinegrow.com/u/randyrie)\
**Post date:** [April 23, 2021, 5:59pm UTC](https://forum.pinegrow.com/t/horizontal-scrolling-slider/5207/9 "2021-04-23T17:59:22Z")

</div>

Thanks again @RobM. Please review my [slider.html](https://rjrwebz.com/weather/slider.html) page when you revisit this.

---

<div class="post-metadata">

**Author:** ![sandrobilbeisi](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/sandrobilbeisi/32/1066_2.png) [@sandrobilbeisi](https://forum.pinegrow.com/u/sandrobilbeisi)\
**Post date:** [April 24, 2021, 9:25am UTC](https://forum.pinegrow.com/t/horizontal-scrolling-slider/5207/10 "2021-04-24T09:25:40Z")

</div>

Your page source has an error  
you have an improper \> closing tag

> `<script> src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.js"</script>`

it should look like :

> `<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.js"</script>`

also , you should consider switching to **tiny-slider** [GitHub - ganlanyuan/tiny-slider: Vanilla javascript slider for all purposes.](https://github.com/ganlanyuan/tiny-slider)

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [April 24, 2021, 1:00pm UTC](https://forum.pinegrow.com/t/horizontal-scrolling-slider/5207/11 "2021-04-24T13:00:24Z")

</div>

Hi @randyrie,  
@sandrobilbeisi is correct that you loading of the carousel is slightly incorrect.  
It should look like:  
`<script src=""https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.js"></script>`  
@sandrobilbeisi missed the closing angle bracket.

So, a couple of things - the owl carousel code needs to be loaded after jQuery. Also for this to style correctly you need the rest of the Bootstrap assets. I didn’t realize, but development/support for owlCarousel has been discontinued. @sandrobilbeisi is correct that they recommend switching to tiny-slider.

Digging into the code, there is some problems with indentation for the last couple of items.  
I would recommend that you switch to tiny-slider and walk through a simple tutorial first: [How To Create A Tiny Slider Carousel | Dilshan Kelsen](https://dilshankelsen.com/how-to-create-a-tiny-slider-carousel/)  
Once you understand this, you can work up to the more complicated example you are trying to create.  
Cheers,  
Bob

---

<div class="post-metadata">

**Author:** ![randyrie](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/randyrie/32/2103_2.png) [@randyrie](https://forum.pinegrow.com/u/randyrie)\
**Post date:** [April 29, 2021, 11:01pm UTC](https://forum.pinegrow.com/t/horizontal-scrolling-slider/5207/12 "2021-04-29T23:01:03Z")

</div>

Thanks again @RobM for the Tiny Slider tip. I’ve created a mini site that uses Dilshan’s HTML, CSS, and JS so I have it for later reference and use.