was successfully added to your cart.

Cart

3DCart supports a lot of responsive sliders out of the box. All these responsive sliders automatically resize the banners to fit the device width. However, this does not work well with all the images.  There are situations where we want to display portrait banners in case of mobile phones and landscapes in case of desktops.  This post explains how to add custom sliders for mobile phones in 3Dcart. You will be able to use two different sets of banners, portrait ones for mobiles and landscape for desktops.

Let’s get started!

First, we’ll need to find the sliders or banners code. To do this:

  • Log into your 3dcartOnline Store Manager
  • Using the left hand navigation menu, go to Settings > Design > Click Themes & Styles

3Dcart Backend

  • Then, on the top right click on more dropdown button

3DCart

  • Click edit template(HTML) and when the file manager loads then find the home.html file.

3dcart file manager

  • Go to the dropdown icon on the top right and click edit home.html file.

3dcart edit template

3dcart edit template

Search home carousel module code which is used for desktop carousel as shown in the screenshot below:

<!–START: home_carousel–>

<link rel=”stylesheet” href=”/assets/templates/common-html5/css/flexslider.css” type=”text/css” media=”screen” />

 

<script type=”text/javascript” src=”/assets/templates/common-html5/js/jquery.flexslider-min.js”></script>

 

The above highlighted code includes slider css and javascript embed code which must be added at top of home.html page.

<div id=”homeCarousel” class=”flexslider”>

<ul class=”slides”>

<!–START: carousel–>

<li><a href=”[link]”><img src=”[image]” alt=” banner” /></a></li>

<!–END: carousel–>

</ul>

</div>

 

The above-highlighted code contains a main <div> element which is the boundary of the slider. The images within <li></li> are managed from the home-carousel module in backend. Add images in the module and then <li></li> elements will be repeated for all the images added in the module.

<script type=”text/javascript” charset=”utf-8″>

jQuery(document).ready(function () {

jQuery(‘#homeCarousel’).flexslider({

animation: “slide”,

slideshowSpeed: 1000,

controlNav: false,

keyboard: false

});

});

</script>

<!–END: home_carousel–>

 

The above mentioned jquery script code adds some extra options to the slider which make slider more attractive. You can find all the options related to flexslider by visiting the following link.

https://github.com/woocommerce/FlexSlider/wiki/FlexSlider-Properties

We hope you enjoyed the article. In case you want to add or discuss something feel free to write to us.

Below is the code to display custom slider for mobile devices

<div id=”mobilehomeCarousel” class=”flexslider” style= ‘display :none ;’>

<ul class=”slides”>

<li><a href=”[link]”><img src=”[complete image 1 path]” alt=”Banner image” /></a></li>

<li><a href=”[link]”><img src=”[complete image 2 path]” alt=” Banner image” /></a></li>

<li><a href=”[link]”><img src=”[complete image 3 path]” alt=” Banner image” /></a></li>

</ul>

</div>

Below is an example of complete image path :

Complete image path = ‘http://example.com/assets/images/myimage.jpg’

The above highlighted code contains a main <div> element which is the boundary of the slider, next comes the slides with the list of images which will be displayed in the slider. As you can see the <li></li> element is repeating, it is because the <li> element is having the link (to which user will be redirected when clicked on the image) and the image.

<script type=”text/javascript” charset=”utf-8″>

jQuery(document).ready(function () {

jQuery(‘#mobilehomeCarousel).flexslider({

animation: “slide”,

slideshowSpeed: 1000,

controlNav: false,

keyboard: false

});

});

</script>

 

The above mentioned jquery script code adds some extra options to the slider which make slider more attractive. You can find all the options related to flexslider by visiting the following link.

https://github.com/woocommerce/FlexSlider/wiki/FlexSlider-Properties

 After adding the script and element you need to add one more script to display slider for mobile devices.

<script>

jQuery(document).ready(function(e) {

if(jQuery(window).width() < 768)

{

jQuery(‘#homeCarousel’).remove();

jQuery(‘#mobilehomeCarousel’).css(‘display’,’block’);

}

});

</script>

 

The above mentioned jquery script code will work only for the mobile devices i.e. the above code will remove the desktop slider while accessing on mobile devices and will display the mobile custom slider.

Hence you will be able to view a good and attractive slider on your website page.

Important Note: The desktop images must be of equal height and width so that the webpage looks great. Follow the same important note for mobile slider also.

 

 

 

Don’t hesitate to reach out! Consultation is free. Contact us today!

Fill in the following details to get started with the logo design process:

Free! PSD Mockups for Attorney

Click Here To Download Free PSD Mockups

In addition to the above list, 10 Hours of Support will be available for some of the following activities/tasks. These tasks will be executed as and when requested by the clients or automatically in case the hours from the previous month are left. The total hours utilized in the activities will not exceed 10 in a month.