[Plugin: TheThe Image Slider] Any plans to make the slider mobile responsive?

Wholeheartedly agree – the slider is fantastic. I’d love to see a responsive version.

Same here – cool slider without all the unneeded functions that others provide. Very lightweight, but still powerful. Would be great to see a responsive version.

ok so i found a hack for this.

few things off the top —
1) i’m using this for a responsive site that is not fluid. i don’t really know the terms, but it basically breaks into a new arrangement at different widths. (go here for an example and resize the window horizontally — https://www.notmuchtoit.com/ )
2) this is quick and dirty. little things like pagination sizes / controllers etc may need to be fine tuned if you care for htme. it’s not extremely difficult through the css.
3) if you are using the plugin to auto-resize the banners, i highly doubt this will work.
4) make sure the auto-resize is off otherwise it will not work (the determination is made by the plugin at the ‘else’ statement I refer to below).
5) i’d recommend commenting lines out instead of deleting in case this doesn’t work.
6) in the settings for the slider width and slider height, set them to the size you want it to be when viewed on a desktop computer. the smaller sizes will override it on smaller screens.

primers —
1) you’ll need to edit the file ‘thethe-image-slider.php’ in the plugin folder
2) you’ll need to edit your CSS file ‘style.css’ in the theme folder.

——————————-
——————————-
Part 1 — edit thethe-image-slider.php
——————————-
——————————-

go to line 269ish

——————————-

find this is the line

$output .= ‘<div class=”thethe_image_slider ‘.$arrOptions[‘_slider_style’].'” id=”thethe_image_slider’.$oPost->ID.'” style=”width:’.$arrOptions[‘_slider_width’].’px;”>’;

——————————-

replace it with or comment it out (#) and add —

$output .= ‘<div class=”thethe_image_slider ‘.$arrOptions[‘_slider_style’].'” id=”thethe_image_slider’.$oPost->ID.'” >’;

(all we did above was take out the width style attribute)

——————————-

go a line down and find this line

$output .= ‘<div class=”thethe_image_slider_inner” style=”width:’.$arrOptions[‘_slider_width’].’px; height:’.$arrOptions[‘_slider_height’].’px;”>’;

——————————-

replace with the line below (or comment it out)

$output .= ‘<div class=”thethe_image_slider_inner”>’;

again, we are removing the style attributes

——————————-

go to approx line 308 or 310 (it depends on whether you commented lines or overwrote them.
in the ‘else’ statement find this line —

$output .='<img src=”‘.$image_src.'” alt=”‘.$slide[‘title’].'” class=”thethe-image-slider-image”/>’;

——————————-

replace with the line below (or comment it out)

$output .='<img src=”‘.$image_src.'” alt=”‘.$slide[‘title’].'” class=”size-slider-image thethe-image-slider-image”/>’;

now, there is an added class in this line. is it necessary? i have no idea. i was testing out different things and i’m not sure if it was what did the trick. if you’re a nerd and want to take it out because its unnecessary and takes up like 20 bits, take it out. i’m not too worried about it.

——————————-
——————————-
——————————-
THAT”S ALL FOR THE thethe-image-slider.php FILE. just those three lines
——————————-
——————————-
——————————-

NEXT UP — YOUR STYLE.CSS FILE
——————————-
——————————-
——————————-

ok, so in each of the different blocks for different screen sizes, this is the only code I added–

just change the widths/heights to fit how large the slider should be.

.thethe_image_slider {width:240px !important;height:64px !important;}
.thethe_image_slider_inner {width:240px !important;height:64px !important;}
.size-slider-image {width:240px !important;height:66px !important;}
.thethe_image_slider.frame-white {border:0px !important;}

EXTRA NOTES:
in the third line — .size-slider-image — note that the height is a few px greater. i noticed there was a little bit of vertical stretching (like 1px, but noticeable) goign on during the slide transition. Making the slide image larger than the container seemed to help.
the fourth line is for the controller… i like the white framed controller but it added a 10px border to the entire thing. so here, i am removing that border.

example:

@media screen and (max-width: 408px) {

… code …

.thethe_image_slider {width:240px !important;height:64px !important;}
.thethe_image_slider_inner {width:240px !important;height:64px !important;}
.size-slider-image {width:240px !important;height:66px !important;}
.thethe_image_slider.frame-white {border:0px !important;}
}

that’s it.