Announcement

**Mike Hughes** · 23-Oct-2024, 04:03 PM

That is probably the easiest way to do it.

I was thinking you could create a layout by copying the related products code from another page and then editing that, but I've realised that would be fixed and wouldn't change for desktop / mobile views.

**EdHarrison** · 23-Oct-2024, 04:05 PM

How about the carrousel code, you can use four items and link off to the info pages (can be hidden from menu).
If you use the right size images they all show I think instead of waiting for each to reappear

**graphicz** · 25-Oct-2024, 08:19 AM

Use slick Slider: https://kenwheeler.github.io/slick/

All the sliders on this page https://www.graphicz.io/sd/index.html are Slick

Scroll down to the Best Sellers/New Products and they are four across sliders

Code:

<script>
$(function() {
$(".nplresponsive .slick-track").css("width","100%");
$(".nplresponsive .slick-slide").css("width","100%");
$('.nplresponsive').slick({
autoplay: true,
autoplaySpeed: 4000,
dots: true,
infinite: true,
speed: 1000,
slidesToShow: 4,
slidesToScroll: 2,
responsive: [{
breakpoint: 1200,
settings: {
slidesToShow: 4,
slidesToScroll: 2,
infinite: true,
dots: true
}
}, {
breakpoint: 992,
settings: {
slidesToShow: 3,
slidesToScroll: 1
}
}, {
breakpoint: 768,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
}, {
breakpoint: 576,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}]
});


var bsl = ['.nplresponsive'];
bsl.forEach(function(value) {
var column = 0;
$(value).find('.card').each(function(){
if($(this).height() > column){
column = $(this).height();
}
});
$(value).find('.card').attr('style','height:'+column+'px');
});

});

</script>

**graphicz** · 25-Oct-2024, 08:24 AM

Built in BX Slider allows multiple slides: https://bxslider.com/examples/carous...-number-slides

Code:

$('.bxslider').bxSlider({ minSlides: 2, maxSlides: 2, slideWidth: 360, slideMargin: 10 });

**graphicz** · 25-Oct-2024, 08:34 AM

A chap called Rahisify did a custom version of BX slider that I use:

Code:

 * Custom modifications of BX slider.
* ---------------------------------------------------------------------------------------
* - Author: Rahisify
* - Url : http://rahisify.com
* ---------------------------------------------------------------------------------------
* (1) Added data attributes support
* (2) Added break points support
* (3) Added automatic reload option
* (4) Added automatic slide width calculation
* (4) Added self calling capability

Unfortunately he has dropped off the internet - but the code is here: https://github.com/Rahisify/bxslider-4

Attached Files

Rahisified-demo.zip (414.5 KB, 3 views)

**graphicz** · 25-Oct-2024, 08:43 AM

Edited example to use in SD - pics refer to images in previous zip

Code:

<!DOCTYPE html>
<html lang="en-gb">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Title of the document</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<link href="jquery.bxslider.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.bxslider-rahisified.js"></script>
</head>
<body>
<script>
$(document).ready( function() {
//$('[class$="bxSlider"]').bxSlider({
$('[class^="bxSlider"]').bxSlider({
slideMargin: 5,
autoReload: true,
minSlides :1,
moveSlides : 1,
maxSlides : 1,
slideWidth : 900,
auto : true,
autoHover : true,
pause : 2000,
mode : 'horizontal',
///slideMargin : 5, for two or three slides
//autoReload : true,
breaks: [{screen:0, slides:1, pager:false},{screen:460, slides:2, pager:false},{screen:768, slides:3, pager:true}]
});
});
</script>
<div class="sidebar">
<div class="bxSliderAB12">
<div class="Slider"><a href="#"><img src="pic1.jpg"></a></div>
<div class="Slider"><a href="#"><img src="pic2.jpg"></a></div>
<div class="Slider"><a href="#"><img src="pic4.jpg"></a></div>
<div class="Slider"><a href="#"><img src="pic3.jpg"></a></div>
<div class="Slider"><a href="#"><img src="pic6.jpg"></a></div>
<div class="Slider"><a href="#"><img src="pic5.jpg"></a></div>
</div>
</div>
</body>
</html>

**Buzby** · 28-Oct-2024, 04:14 PM

Many thanks all.

I think I may stick to the way I outlined in my post, however, Jonathan I do have an idea for somewhere else for what you have posted above. So many thanks for taking the time to do so.

Announcement

Info pages instead of Related Products

Info pages instead of Related Products

Comment

Comment

Comment

Comment

Comment

Comment

Comment