Getting rid of arrows

JavaScript
1

I included the slick image slider in one of my pages. It included forward/backward buttons either side of the image container. I found the buttons ugly and decided to go ahead without them but as I could not find a way of disabling them, made them white as the background.

Now, I found that the page has a lot of lateral movement in small devices and it appears that this may be due to those invisible (but active) buttons.

I suppose that somewhere in one of the scripts (slick-theme.css) something must be changed. Unfortunately javascript is a big mystery for me… I tried display:none in thee part of the css below but it did not get rid of the links.

So, I suppose one of the scripts needs fiddling with…

If you move the mouse around the left side of the images you will find the hidden backward arrow

I hope that you can help. Thank you

/* Arrows */
.slick-prev,
.slick-next
{

font-size: 0;
line-height: 0;

position: absolute;
top: 50%;

display: block;

width: 20px;
height: 20px;
margin-top: -10px;
padding: 0;

cursor: pointer;

color: transparent;
border: none;
outline: none;
background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
color: transparent;
outline: none;
background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
opacity: .25;
}

.slick-prev:before,
.slick-next:before
{

font-family: ‘slick’;
font-size: 20px;
line-height: 1;

opacity: .75;
color: transparent;

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.slick-prev
{

left: -25px;
}
[dir=‘rtl’] .slick-prev
{
right: -25px;
left: auto;
}
.slick-prev:before
{
content: ‘’;
}
[dir=‘rtl’] .slick-prev:before
{
content: ‘’;
}

.slick-next
{

right: -25px;
}
[dir=‘rtl’] .slick-next
{
right: auto;
left: -25px;
}
.slick-next:before
{
content: ‘’;
}
[dir=‘rtl’] .slick-next:before
{
content: ‘’;
}

2

Hi there qim,

try it like this, possibly…

.slick-prev,.slick-next { z-index:-1; }

coothead

3

Hi coothead

Is this to be added, amended? I cannot see anything to do with z-index

4

Hi there qim,

just add the…

    z-index:-1;

…to your already existing rules. :ok:

coothead

5

brilliant, as usual!.. but unfortunately it did not solve the problem, suggesting that the reason is something else: css?

Unless the link that has disappeared is still taking up space.

I had a similar problem in the past that was due to white-space:nowrap.

if you have access to mobiles (I know you don’t own them, as you tols me once, or twice…) you can see the difference between the original index page, and another where I added your snip of code http://pintotours.net/TEMP/SOS/

No difference!

6

Hm, try to disable arrows, by using something like this, in slick intialize:

$('.single-item').slick(
    arrows: false,
);

In your case, it would looks like this:

$('.single-item').slick({
  dots:true,
  slidesToShow: 1,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 3000,
  arrows: false
 });
1 Like
7

Hi there qim,

are you saying that the CSS code that I gave you here…

http://pintotours.net/TEMP/SOS/

… has no effect, as far as you are concerned?

It works OK for me, of course. :sunglasses:

But, as you have pointed out, I am unable to test on “thumb appliances”. :mask:

coothead

8

Great. It’s solved the problem!

9

Hi coothead

Yes, it appeared to get rid of the link (the hand no longer appeared) but did not stop the lateral movement in small devices.

This last suggestion from bedakb did the trick.

many thanks both.

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.