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)
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
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?
I’ll write a little something up very soon. Too many windows to reglaze today. Sorry!!
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
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
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 page but the 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?
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
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.
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
Once you understand this, you can work up to the more complicated example you are trying to create.
Cheers,
Bob
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.
