Problems With Slider

[lazerz69]

On my website the slider is not working as desired.

The website is www.dancecityperformingarts.com

 

When you click on the name of the dance class the slider moves, but does not move to the page that has the dance class description. It stays at the picture with the business description.

 

When you click on the "details" portion, it takes you to the page that has the correct class description, but the slider does not move to the correct picture.

 

Can anyone tell me if this can be corrected, and if yes, how to correct.

 

I am very new to coding, and I apologize if this is phrased incorrectly or if additional information is needed.

 

ATTN: Moderators, this is my first post. I did read the guidelines and hope I complied. Please advise if I screwed anything up.

 

Thanks for any assistance with my coding problem.

 

[dsonesuk]

The links are restricted to bottom, so you need to wrap the whole column height, which can be done several ways, but it is not guaranteed to affect slider.

 

The slider when loaded will always shows is default state on loading on individual pages, it has no way to identify which link you clicked on previous page unless you somehow identify what was clicked and store this using cookies, webstorage, or hash, so when the page has loaded you open specific slide, or slide specific slide open.

[lazerz69]

@dsonesuk - Thank you very much for the response. I was afraid it would be problematic to do what I wanted.

 

Is there anyway to make the sliders automatic. Meaning when you scroll over the specific class name it will automatically slide to the desired picture.

 

Again, thanks for the response and any guidance you can provide.

[dsonesuk]

Scroll? or hover? or click? this code which slides to correct image on hover and stores index ref of current slide in a cookie not web-storage (since you are using old doctype) seems to work, on open of other page it retrieve index from cookie and sets to that slide on loading of page.

            function setCookie(cname, cvalue, exdays) {
                var d = new Date();
                d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
                var expires = "expires=" + d.toUTCString();
                document.cookie = cname + "=" + cvalue + "; " + expires;
            }

            function getCookie(cname) {
                var name = cname + "=";
                var ca = document.cookie.split(';');
                for (var i = 0; i < ca.length; i++) {
                    var c = ca[i];
                    while (c.charAt(0) == ' ')
                        c = c.substring(1);
                    if (c.indexOf(name) == 0)
                        return c.substring(name.length, c.length);
                }
                return "";
            }
            var parentWidth, childLiWidth, childLiNumber, mainImageFullSize, backcount, set_pos;

            function show_cookie_pos() {
                set_pos = getCookie('kwicks_slide');
                if (set_pos !== "")
                {

                    var set_pos = getCookie('kwicks_slide');

                    if (set_pos !== "")
                    {

                        $('.kwicks.horizontal li').eq(set_pos).css({"width": mainImageFullSize + "px"});

                        $('.kwicks.horizontal li:gt(' + set_pos + ')').each(function() {
                            $(this).css({'left': 'auto', 'width': childLiWidth + 'px', 'right': $(this).attr('data-right-pos') + 'px'});

                        });
                    }

                }

            }



            $(function() {

                parentWidth = $('.kwicks.horizontal').width();
                childLiWidth = $('.kwicks.horizontal li').eq(0).width();
                childLiNumber = $('.kwicks.horizontal li').size();
                mainImageFullSize = parentWidth - (childLiWidth * (childLiNumber - 1));
                backcount = childLiNumber - 1;

                $('.kwicks.horizontal li').each(function() {
                    $(this).attr('data-right-pos', backcount * childLiWidth);
                    $(this).attr('data-left-pos', ((childLiNumber * childLiWidth) - childLiWidth) - (backcount * childLiWidth));
                    backcount--;
                });


                $('.kwicks.horizontal li span').hover(function() {
                    var LItem = $('.kwicks.horizontal li');
                    if (parseInt($(this).parent('li').next('li').width()) === mainImageFullSize && parseInt($(this).parent('li').prev('li').width()) === childLiWidth || parseInt($(this).parent('li').next('li').width()) === mainImageFullSize && $(this).parent('li').index(LItem) === 0) {
                        $(this).parent('li').animate({"width": mainImageFullSize + "px"});
                        $(this).parent('li').next('li').animate({"width": childLiWidth + "px", 'right': $(this).parent('li').next('li').attr('data-right-pos') + "px"});
                        $(this).parent('li').next('li').css({"left": "auto", "width": childLiWidth + "px", "right": $(this).parent('li').next('li').attr('data-right-pos') + "px"});
                    }
                    if (parseInt($(this).parent('li').prev('li').width()) === mainImageFullSize && parseInt($(this).parent('li').next('li').width()) === childLiWidth || parseInt($(this).parent('li').prev('li').width()) === mainImageFullSize && parseInt($(this).parent('li').width()) === childLiWidth) {

                        $(this).parent('li').animate({"width": mainImageFullSize + "px"});
                        $(this).parent('li').prev('li').animate({"width": childLiWidth + "px", 'left': $(this).parent('li').prev('li').attr('data-left-pos') + "px"});
                        $(this).parent('li').prev('li').css({"right": "auto", "width": childLiWidth + "px", "left": $(this).parent('li').prev('li').attr('data-left-pos') + "px"});
                    }
                    $('.kwicks.horizontal li').removeClass('active');
                    $(this).parent('li').addClass('active');
                    var current_slide = $('.kwicks.horizontal li').index($(this).parent('li'));
                    setCookie('kwicks_slide', current_slide, 365);
                });

                show_cookie_pos();

            });

css to make anchor link fill whole dark greyed box area

            .kwicks li a {
                background-position: center bottom;
                bottom: 0;
                height: auto;
                left: 0;
                top: 0;
            }