Flexslider: additional options

2 replies·opened Aug 29, 2019
T
themepackAug 29, 2019

Is it possible to add additional config options to flexslider? For example I had a client that wanted two testimonials show in a fslider. I tried modifying in functions.php but it didn't appear to work

loadFlexSlider: function(){

    if( !$().flexslider ) {
        console.log('loadFlexSlider: FlexSlider not Defined.');
        return true;
    }

    var $flexSliderEl = $('.fslider:not(.customjs)').find('.flexslider');
    if( $flexSliderEl.length > 0 ){
        $flexSliderEl.each(function() {
            var $flexsSlider = $(this),
                flexsAnimation = $flexsSlider.parent('.fslider').attr('data-animation'),
                flexsEasing = $flexsSlider.parent('.fslider').attr('data-easing'),
                flexsDirection = $flexsSlider.parent('.fslider').attr('data-direction'),
                flexsReverse = $flexsSlider.parent('.fslider').attr('data-reverse'),
                flexsSlideshow = $flexsSlider.parent('.fslider').attr('data-slideshow'),
                flexsPause = $flexsSlider.parent('.fslider').attr('data-pause'),
                flexsSpeed = $flexsSlider.parent('.fslider').attr('data-speed'),
                flexsVideo = $flexsSlider.parent('.fslider').attr('data-video'),
                flexsPagi = $flexsSlider.parent('.fslider').attr('data-pagi'),
                flexsArrows = $flexsSlider.parent('.fslider').attr('data-arrows'),
                flexsThumbs = $flexsSlider.parent('.fslider').attr('data-thumbs'),
                flexsHover = $flexsSlider.parent('.fslider').attr('data-hover'),
                flexsSheight = $flexsSlider.parent('.fslider').attr('data-smooth-height'),
                flexsTouch = $flexsSlider.parent('.fslider').attr('data-touch'),
                flexsMinItems = $flexsSlider.parent('.fslider').attr('data-min-items'),
                flexsMaxItems = $flexsSlider.parent('.fslider').attr('data-max-items'),
                flexsNumber = $flexsSlider.parent('.fslider').attr('data-number'),                        
                flexsUseCSS = false;

            if( !flexsAnimation ) { flexsAnimation = 'slide'; }
            if( !flexsEasing || flexsEasing == 'swing' ) {
                flexsEasing = 'swing';
                flexsUseCSS = true;
            }
            if( !flexsDirection ) { flexsDirection = 'horizontal'; }
            if( flexsReverse == 'true' ) { flexsReverse = true; } else { flexsReverse = false; }
            if( !flexsSlideshow ) { flexsSlideshow = true; } else { flexsSlideshow = false; }
            if( !flexsPause ) { flexsPause = 5000; }
            if( !flexsSpeed ) { flexsSpeed = 600; }
            if( !flexsVideo ) { flexsVideo = false; }
            if( flexsSheight == 'false' ) { flexsSheight = false; } else { flexsSheight = true; }
            if( flexsDirection == 'vertical' ) { flexsSheight = false; }
            if( flexsPagi == 'false' ) { flexsPagi = false; } else { flexsPagi = true; }
            if( flexsThumbs == 'true' ) { flexsPagi = 'thumbnails'; } else { flexsPagi = flexsPagi; }
            if( flexsArrows == 'false' ) { flexsArrows = false; } else { flexsArrows = true; }
            if( flexsHover == 'false' ) { flexsHover = false; } else { flexsHover = true; }
            if( flexsTouch == 'false' ) { flexsTouch = false; } else { flexsTouch = true; }
            if( !flexsMinItems ) { flexsMinItems = 0; }
            if( !flexsMaxItems ) { flexsMaxItems = 0; }
            if( !flexsNumber ) { flexsNumber = 0; }
            
            $flexsSlider.flexslider({
                selector: ".slider-wrap > .slide",
                animation: flexsAnimation,
                easing: flexsEasing,
                direction: flexsDirection,
                reverse: flexsReverse,
                slideshow: flexsSlideshow,
                slideshowSpeed: Number(flexsPause),
                animationSpeed: Number(flexsSpeed),
                pauseOnHover: flexsHover,
                video: flexsVideo,
                controlNav: flexsPagi,
                directionNav: flexsArrows,
                smoothHeight: flexsSheight,
                useCSS: flexsUseCSS,
                touch: flexsTouch,
                minItems: flexsMinItems,
                maxItems: flexsMaxItems,
                move: flexsNumber,
                start: function(slider){
                    SEMICOLON.widget.animations();
                    SEMICOLON.initialize.verticalMiddle();
                    slider.parent().removeClass('preloader2');
                    var t = setTimeout( function(){ $('.grid-container').isotope('layout'); }, 1200 );
                    SEMICOLON.initialize.lightbox();
                    $('.flex-prev').html('<i class="icon-angle-left"></i>');
                    $('.flex-next').html('<i class="icon-angle-right"></i>');
                    SEMICOLON.portfolio.portfolioDescMargin();
                },
                after: function(){
                    if( $('.grid-container').hasClass('portfolio-full') ) {
                        $('.grid-container.portfolio-full').isotope('layout');
                        SEMICOLON.portfolio.portfolioDescMargin();
                    }
                    if( $('.post-grid').hasClass('post-masonry-full') ) {
                        $('.post-grid.post-masonry-full').isotope('layout');
                    }
                }
            });
        });
    }
},
T
themepackAug 29, 2019

Sorry, two testimonials 'at a time' show on each slide

S
SemiColonWebSTAFFAug 30, 2019

Hello,

This is Definitely Possible and can be achieved without editing the JS Codes. The Flex Slider's Slide area is a Blank Canvas and you can place any number of Elements inside it. To use multiple Testimonials inside the Slide Area, make sure that you are placing them inside the Bootstrap Grid. Example:

<div class="fslider testimonial" data-animation="fade" data-arrows="false">
	<div class="flexslider">
		<div class="slider-wrap">
			<div class="slide">
				<div class="row">
					<div class="col-6">
						<div class="testi-image">
							<a href="#"><img src="images/testimonials/3.jpg" alt="Customer Testimonails" /></a>
						</div>
						<div class="testi-content">
							<p>Similique fugit repellendus expedita excepturi iure perferendis provident quia eaque. Repellendus, vero numquam?</p>
							<div class="testi-meta">
								Steve Jobs
								<span>Apple Inc.</span>
							</div>
						</div>
					</div>
					<div class="col-6">
						<div class="testi-image">
							<a href="#"><img src="images/testimonials/2.jpg" alt="Customer Testimonails" /></a>
						</div>
						<div class="testi-content">
							<p>Natus voluptatum enim quod necessitatibus quis expedita harum provident eos obcaecati id culpa corporis molestias.</p>
							<div class="testi-meta">
								Collis Ta'eed
								<span>Envato Inc.</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="slide">
				<div class="testi-image">
					<a href="#"><img src="images/testimonials/1.jpg" alt="Customer Testimonails" /></a>
				</div>
				<div class="testi-content">
					<p>Incidunt deleniti blanditiis quas aperiam recusandae consequatur ullam quibusdam cum libero illo rerum!</p>
					<div class="testi-meta">
						John Doe
						<span>XYZ Inc.</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard