I'm looking for some way to have the prev/next controls as simple arrow graphics that overlay the images.

Is this possible?

Thanks for the time and any insight.

CommentFileSizeAuthor
#5 arrow-next.png1.28 KBklucid
#5 arrow-prev.png1.3 KBklucid
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

sumerokr’s picture

sumerokr CreditAttribution: sumerokr commented

Hi man!
yes, its possible, just use css.
for ex.: use position: absolute for prev/next

thinguy’s picture

thinguy CreditAttribution: thinguy commented

I'm better a Google'ing than I am at CSS so from piecing together various info here is my solution.
Open to any critiques or problems you see this may cause.
This is moving the bottom (previous/pause/next) text off the screen and replacing them with left/right arrows on the edges of my slideshow.

Thanks.

#views_slideshow_controls_text_previous_quote_header_block-block a:hover {
background-image: url(../images/previous-button.png);
height: 90px;
width: 60px;
position: absolute;
top:20px;
left: -10px;
z-index: 999;
white-space:nowrap;
text-indent: -9999px;
}

#views_slideshow_controls_text_previous_quote_header_block-block a {
background-image: url(../images/button-blank.png);
height: 90px;
width: 60px;
position: absolute;
top:20px;
left: -10px;
z-index: 999;
white-space:nowrap;
text-indent: -9999px;
}

#views_slideshow_controls_text_next_quote_header_block-block a:hover {
background-image: url(../images/next-button.png);
height: 90px;
width: 60px;
position: absolute;
top:20px;
left: 900px;
z-index: 999;
white-space:nowrap;
text-indent: -9999px;
}

#views_slideshow_controls_text_next_quote_header_block-block a {
background-image: url(../images/button-blank.png);
height: 90px;
width: 60px;
position: absolute;
top:20px;
left: 900px;
z-index: 999;
white-space:nowrap;
text-indent: -9999px;
}

#views_slideshow_controls_text_pause_quote_header_block-block a:hover {
/* Pause doesn't need a graphic since any hover of the image automatically pauses, so this just moves the "pause" out of the way */
/*background-image: url(../images/next-button.png);
height: 90px;
width: 60px;

top:20px;
left: 450px;
z-index: 999; */
position: absolute;
white-space:nowrap;
text-indent: -9999px;
}

#views_slideshow_controls_text_pause_quote_header_block-block a {
/*background-image: url(../images/button-blank.png);
height: 90px;
width: 60px;

top:20px;
left: 450px;
z-index: 999; */
position: absolute;
white-space:nowrap;
text-indent: -9999px;
}

redndahead’s picture

redndahead CreditAttribution: redndahead commented
Status: Active » Fixed

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

klucid’s picture

klucid CreditAttribution: klucid commented
FileSize
arrow-prev.png1.3 KB
arrow-next.png1.28 KB

I know this is an old thread, but I wanted to share my solution. It's a simplified version of thinguy's, but more importantly, it has a larger area for the user to hover (about half of the slideshow). So, if you were to hover over the entire right side of the slideshow, you would see the next arrow.

Also included my next/previous arrows.

Modify your pixels accordingly:

.views-slideshow-controls-bottom {
	width: 880px;
	margin: 0 0 0 -15px;
}

#views_slideshow_controls_text_previous_homepage_slideshow-block_1 a,
#views_slideshow_controls_text_next_homepage_slideshow-block_1 a {
height: 389px;
width: 420px;
position: absolute;
top: 0;
z-index: 10000;
white-space:nowrap;
text-indent: -9999px;
}

#views_slideshow_controls_text_previous_homepage_slideshow-block_1 a:hover {
background: url(images/arrow-prev.png) no-repeat 0px 50%;
}

#views_slideshow_controls_text_next_homepage_slideshow-block_1 a:hover {
background: url(images/arrow-next.png) no-repeat 100% 50%;
}

#views_slideshow_controls_text_next_homepage_slideshow-block_1 {
float: left;
width: auto;
margin-left: 465px;
}

#views_slideshow_controls_text_previous_homepage_slideshow-block_1 {
float: left;
width: auto;
margin-left: 25px;
}

#views_slideshow_controls_text_pause_homepage_slideshow-block_1 a {
display: none;
}