Custom Slidable Prev/Next Buttons not showing on Internet Explorer

gnmcvey — Mon, 30 Nov 2015 09:44:24 +0000

I have tried to create custom Prev/Next buttons on a slidable element in visual composer. It works fine on Google Chrome and Firefox, however on Internet Explorer it is not displaying the buttons at all.

Here is the class I have created to generate the custom previous image on the button:

.flex-prev{
  background-image: url(/wp-content/uploads/2015/11/SliderArrowLeft.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.flex-prev{

background-image: url(/wp-content/uploads/2015/11/SliderArrowLeft.png);

background-repeat: no-repeat;

background-size: contain;

}

Furthermore is there a simple way to stop the Prev/Next buttons fading out when the mouse is not hovered over them?

Thanks

Reply To: Custom Slidable Prev/Next Buttons not showing on Internet Explorer

IshYoBoy — Tue, 01 Dec 2015 08:00:49 +0000

Hi gnmcvey,

which one of version IE are you using?
We tested your code and it works for version IE9 and higher.

Adjusting hover effect as you need, you have to add css code and also adjust javascript code.
Add this css code into “Theme Options -> General Options -> Custom CSS”:

.ish-slidable .flex-direction-nav {
    display: block;
}

.ish-slidable .flex-direction-nav {

display: block;

}

Find this function “activate_shortcode_slidable” inside file \wp-content\themes\boldial\assets\frontend\js\main.js:

// Slidable container --------------------------------------------------------------------------------------------------
if ( ! function_exists( 'activate_shortcode_slidable' ) ) {
	ish.activate_shortcode_slidable = function (){

		var slidable = jQuery('.ish-slidable');

		if ( slidable.length > 0 ) {
			slidable.each(function() {
				jQuery(this).find('[class*="ish-slide"]').wrapAll('<div class="ish-slidable-container" />');
			});

			slidable.each(function() {
				var me = jQuery(this);
                var me_slider = me.find('.ish-slidable-container');
				var dataAttr = {
					autoslide: me.attr('data-autoslide'),
					interval: me.attr('data-interval'),
					animation: me.attr('data-animation'),
					navigation: me.attr('data-navigation'),
                    prevnext: me.attr('data-prevnext')
				};

				// Fix autoslide when only one slide available
				var slides = me.find('[class*="ish-slide"]');
				if ( slides.length <= 1 ) {
					dataAttr.autoslide = 'no';
				}

				var opts = {
					selector: '.ish-slidable-container > [class*="ish-slide"]',
					animation: 'slide',
					directionNav: true,
					slideshow: false,
					smoothHeight: true,
					prevText: '',
					nextText: '',
					video: true,
					pauseOnHover: true,
					//controlsContainer: ".ish-slidable",
					keyboard: false,
					start: function() {
						//me.flexslider('pause');
						if ( dataAttr.autoslide == 'yes' ) {
							jQuery(window).scroll(function() {

								if ( me.isOnScreen() ) {
									me.flexslider('play');
								}
								else {
									me.flexslider('pause');
								}

							});

							if ( me.isOnScreen() ) {
								me.flexslider('play');
							}
							else {
								me.flexslider('pause');
							}
						}

						fixVideoHeights();

						jQuery('.ish-slider .flex-control-nav').show();

						me.resize();

						// Hide images from the very beginning
						jQuery('.ish-slidable img').css('visibility', 'visible');

                        // Show navigation arrows on hover
                        me.hover(function () {
                            me.find('.flex-direction-nav').stop(true, true).fadeIn();
                        }, function() {
	                        me.find('.flex-direction-nav').stop(true, true).fadeOut();
                        });

					}
				};

				// Only if autoslide is 'yes' set the interval -> default / custom
				if ( dataAttr.autoslide == 'yes' ) {
					opts.slideshow = true;

					if ( dataAttr.interval != undefined ) {
						opts.slideshowSpeed = dataAttr.interval * 1000;
					}
					else {
						opts.slideshowSpeed = 4000;
					}

				}

				// Change animation to fade
				if ( dataAttr.animation == 'fade' ) {
					opts.animation = 'fade';
					me.addClass('anim-fade');
				}

				// Turn off navigation
				if ( dataAttr.navigation == 'no' ) {
					opts.controlNav = false;
				}

                // Turn off direction Nav
                if ( dataAttr.prevnext == 'no' ) {
                    opts.directionNav = false;
                }

				me.imagesLoaded(function() {
					me.show().flexslider(opts);
				});

			});
		}

	}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

// Slidable container --------------------------------------------------------------------------------------------------

if ( ! function_exists( 'activate_shortcode_slidable' ) ) {

ish.activate_shortcode_slidable = function (){

var slidable = jQuery('.ish-slidable');

if ( slidable.length > 0 ) {

slidable.each(function() {

jQuery(this).find('[class*="ish-slide"]').wrapAll('

');

});

slidable.each(function() {

var me = jQuery(this);

var me_slider = me.find('.ish-slidable-container');

var dataAttr = {

autoslide: me.attr('data-autoslide'),

interval: me.attr('data-interval'),

animation: me.attr('data-animation'),

navigation: me.attr('data-navigation'),

prevnext: me.attr('data-prevnext')

};

// Fix autoslide when only one slide available

var slides = me.find('[class*="ish-slide"]');

if ( slides.length <= 1 ) {

dataAttr.autoslide = 'no';

}

var opts = {

selector: '.ish-slidable-container > [class*="ish-slide"]',

animation: 'slide',

directionNav: true,

slideshow: false,

smoothHeight: true,

prevText: '',

nextText: '',

video: true,

pauseOnHover: true,

//controlsContainer: ".ish-slidable",

keyboard: false,

start: function() {

//me.flexslider('pause');

if ( dataAttr.autoslide == 'yes' ) {

jQuery(window).scroll(function() {

if ( me.isOnScreen() ) {

me.flexslider('play');

}

else {

me.flexslider('pause');

}

});

if ( me.isOnScreen() ) {

me.flexslider('play');

}

else {

me.flexslider('pause');

}

fixVideoHeights();

jQuery('.ish-slider .flex-control-nav').show();

me.resize();

// Hide images from the very beginning

jQuery('.ish-slidable img').css('visibility', 'visible');

// Show navigation arrows on hover

me.hover(function () {

me.find('.flex-direction-nav').stop(true, true).fadeIn();

}, function() {

me.find('.flex-direction-nav').stop(true, true).fadeOut();

});

}

};

// Only if autoslide is 'yes' set the interval -> default / custom

if ( dataAttr.autoslide == 'yes' ) {

opts.slideshow = true;

if ( dataAttr.interval != undefined ) {

opts.slideshowSpeed = dataAttr.interval * 1000;

}

else {

opts.slideshowSpeed = 4000;

}

// Change animation to fade

if ( dataAttr.animation == 'fade' ) {

opts.animation = 'fade';

me.addClass('anim-fade');

}

// Turn off navigation

if ( dataAttr.navigation == 'no' ) {

opts.controlNav = false;

}

// Turn off direction Nav

if ( dataAttr.prevnext == 'no' ) {

opts.directionNav = false;

}

me.imagesLoaded(function() {

me.show().flexslider(opts);

});

}

Copy all this lines into your child theme and comment these few lines inside mentioned function:

// Show navigation arrows on hover
/*me.hover(function () {
me.find('.flex-direction-nav').stop(true, true).fadeIn();
}, function() {
   me.find('.flex-direction-nav').stop(true, true).fadeOut();
});*/

// Show navigation arrows on hover

/*me.hover(function () {

me.find('.flex-direction-nav').stop(true, true).fadeIn();

}, function() {

me.find('.flex-direction-nav').stop(true, true).fadeOut();

});*/

To avoid losing your changes in the future when a necessary update of the theme will be published you should use a child theme to make these changes and not modifying the parent theme directly.
To learn more about child themes and how to use them check this topic:
https://support.ishyoboy.com/forums/topic/what-is-a-child-theme-and-how-but-mainly-why-to-use-it/

Cheers

—
If you are happy with our theme and support please rate us in your Downloads Section on ThemeForest. A 5 star rating is always a great motivation for us!

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

Support ForumCustom Slidable Prev/Next Buttons not showing on Internet Explorer – Support Forum

Custom Slidable Prev/Next Buttons not showing on Internet Explorer

Reply To: Custom Slidable Prev/Next Buttons not showing on Internet Explorer