Jump to content

How to change slideshow next & previous "dots" shapes & change colors?


Recommended Posts

This depends on your theme, and that slider you use.

 

Generally sliders have JavaScript options to show/hide pagination (usually dots)

and/or to display navigation (usually arrows), 

 

So first try maybe slider module configuration, and if no option then some code is needed

to change is .js or .tpl file.

 

Also link to your site would help.

  • Like 1
Link to comment
Share on other sites

OK try this first. Open and edit file in your theme folder /js/modules/homeslider/js/homeslider.js

and make two changes 

			pager: false,

			controls: true,

So it looks like

$('#homeslider').bxSlider({
			mode:'fade',
			useCSS: false,
			maxSlides: 1,
			slideWidth: homeslider_width,
			infiniteLoop: homeslider_loop,
			hideControlOnEnd: true,
			pager: false,
			autoHover: true,
			autoControls: true,
			auto: homeslider_loop,
			speed: homeslider_speed,
			pause: homeslider_pause,
			controls: true,
			startText:'',
			stopText:'',
     		onSliderLoad: function() {
				$('.homeslider-description').animate({left:'6.8%'}, 400, 'swing');
			}, 
			onSlideBefore: function(){
				$('.homeslider-description').stop().animate({left:'-400px'}, 400, 'swing');

				
			},
			onSlideAfter: function(){
				$('.homeslider-description').stop().animate({'left':'6.8%'}, 400, 'swing');
			}

		 
		});

That should hide pagination and show arrows. Do not forget to clear PrestaShop cache if changes are not visible.

Link to comment
Share on other sites

Hmm please check that you edit homeslider.js it theme folder.

Then confirm changes in code after loading full URL in browser

http://static.livedemo00.template-help.com/prestashop_50521/themes/theme998/js/modules/homeslider/js/homeslider.js

is for example demo one.

 

Also if you maybe have some caching module clear cache there or disable it.

 

Code changes should work btw :-)

 

And for maxSlides it is number of visable slides in one moment so if you change to 3  all 3 will be displayed like carousel.

Here yo ucan see all options explanation http://bxslider.com/options

Link to comment
Share on other sites

Hi, Razaro,

 

Here are screenshots showing where I got the homeslider.js file and date/time edited. Also the contents of the edited homeslider.js file. I cleared the cache, forced compilation, recompiled and cleared cache.

 

I took another screenshot and left the date and time in the filename. The dots are still there. We can only see one gray dot and not the white dots because of the white background. Anything that doesn't match the original theme besides what we're talking about are fixes previously done.

 

I loaded the full URL in my browser:

 

https://www.mysite.com/themes/theme998/js/modules/homeslider/js/homeslider.js

and attached the screenshot of that code.

 

I attached screenshot of where I clear the cache and recompile, etc.

 

I hope you can see what is wrong.

 

Thank you for the explanations for the maxslides and other options!

post-1292894-0-50662700-1477140235_thumb.jpg

post-1292894-0-97062300-1477140260_thumb.jpg

post-1292894-0-44124000-1477140751_thumb.jpg

post-1292894-0-22818900-1477141618_thumb.jpg

post-1292894-0-70800700-1477141838_thumb.jpg

Edited by pause4paws (see edit history)
Link to comment
Share on other sites

For changing colors you need to edit themes/theme998/css/modules/homeslider/homeslider.css file

line 167 

#homepage-slider .bx-wrapper .bx-pager.bx-default-pager a {
    background: #ffffff;
    text-indent: -9999px;
    display: block;
    width: 12px;
    height: 12px;
    margin: 0 4px 0 5px;
    outline: 0;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-radius: 12px;
}

Change  background: #ffffff;  to color you want. Also if needed change hover color, line 184

#homepage-slider .bx-wrapper .bx-pager.bx-default-pager a:hover, #homepage-slider .bx-wrapper .bx-pager.bx-default-pager a.active {
    background: #7d7d7d;
}
  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...