Welcome! To use this support forum, please Login or Join Today!

   

Backstretch Page: Flexslider Navigation Control Bullets, HTML field

{name}
Rank

Total Posts: 23

Joined 2015-08-06

PM

 

Hi Casey,

I have two questions regarding the Backstretch page template.

1. Flexslider Navigation Control Bullets
At one time, Flexslider had navigation controls in the form of bullets (one for each slide) that users could click to navigate slides. The bullet navigation could also be styled with CSS. When using the Backstretch page template, is it possible to override the current arrow/pause controls with bullets for each slide?

2. HTML Field
I’d like to add HTML (paragraph text, buttons, etc.) on top of each full-width slide. This was possible with the featured slider/teaser widget when creating slideshows. Is it possible to do this with the Backstretch custom fields somehow?

Any help is greatly appreciated.

{name}
Rank

Total Posts: 23

Joined 2015-08-06

PM

 

Casey,

After experimenting on my own with a custom ACF repeater field + a fixed-height backstretch.js solution, I realize this level of support is beyond “developer membership”. I’m simply unable to figure out how to do this within the Mobius backstretch solution you already have in place. Wowza!

If you have a solution to the problem that addresses both the bullet-point navigation controls, plus the ability to add HTML (e.g., H1, paragraph text and a button) on top of each slide, I’m happy to pay custom development fees in advance to tackle this problem.

Including text and a button on top of each slide is simple enough by hardcoding HTML into a PHP template and styling it with CSS, but my goal is to allow a non-technical user to edit such features via custom fields. It would add a useful feature to the already incredible framework you’ve created for child theme development.

In any event, please let me know what you think.

Cheers!

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

Hi,

Backstretch is basically a script that achieves smart scaling on full size element background images. I added the navigation and captions so that it could function as a slider. It’s really not full-featured and there are much better slider solutions for what you might be wanting to achieve.

Mobius does come with a slider (Flexslider) which can be enabled in the Teaser widget position, however it is part of the container so it isn’t full width.

Lately I’ve been loving Slick for responsive sliders. Here’s how you’d achieve it in Mobius. If the below is intimidating or if you need additional help/services, just email me a mockup of what you’re after and I’m sure we can work something out.


To integrate a full-width Slick slider below the header, you’d do the following:

Here’s a gist of the whole bit: https://gist.github.com/simplethemes/d5bd0a564bb93e19a1e9
Here’s a demo of the result: http://themes.simplethemes.com/mobius/slick-slider-demo/


1.) Download Slick and extract the /slick directory to your child theme folder.
2.)  Enqueue the scripts/css like so:

function child_css() {
 wp_enqueue_style
('slick'get_stylesheet_directory_uri().'/slick/slick.css', array('style'), '1.0''screen, projection');
 
wp_enqueue_style('slick-theme'get_stylesheet_directory_uri().'/slick/slick-theme.css', array('style'), '1.0''screen, projection');
}
add_filter
'add_stylesheets','child_css' );

function 
child_scripts() {
 wp_enqueue_script
('slick'get_stylesheet_directory_uri()."/slick/slick.min.js",array('jquery'),'1.0',false);
 
wp_enqueue_script('slick-custom'get_stylesheet_directory_uri()."/slick/slider.js",array('jquery'),'1.0',false);
}
add_filter
'add_scripts','child_scripts' ); 

3.) The slider.js referenced above is your script to call Slick. You’ll need to create this file. The contents should be:

jQuery(document).ready(function($) {
    
$('#slick').slick({
        slide
'.slide',
        
dotstrue,
        
arrowstrue,
        
infinitetrue,
        
speed300,
        
slidesToShow1,
        
adaptiveHeightfalse
    }
);
}); 


4.) Back in your functions.php file, add the slider. You can use ACF to make this more dynamic, but this is the basic gist:

function slick_slider() {
if (is_front_page()) : ?>
 
<div id="slick">
 <!-- 
Slide 1 -->
 <
div class="slide">
  <
div class="caption">
   <
div class="inner">
    <
h1>Caption</h1>
    <
class="button pull-right" href="#">Button</a>
    <
p>Lorem Ipsum is simply dummy text of the printing and typesetting industryLorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
   </div>
  </div>
  <img src="http://f.cl.ly/items/0p1u0A3E1l0j1P0X0c2d/photo-1433354359170-23a4ae7338c6.jpg" alt="img"/>
 </div>
 <!-- Slide 2 -->
 <div class="slide">
  <img src="http://f.cl.ly/items/2S2s0n3f0E2K1w212O0U/photo-1436891620584-47fd0e565afb.jpg" alt="img"/>
 </div>
 <!-- Slide 3 -->
 <div class="slide">
  <img src="http://f.cl.ly/items/46183N3e1y1c0E1i0s1G/photo-1437422061949-f6efbde0a471.jpg" alt="img"/>
 </div>
 </div>
<?php endif;
}

add_action( '
st_after_header', 'slick_slider',1); 

5.) Lastly, add this CSS to your style{x}.css (whichever you have selected in theme options e.g; style1.css:

/* Mobius Slick Slider */

#slick {
  
positionrelative;
}

#slick  ul.slick-dots {
  
margin!important;
  
padding!important;
}

#slick button {
  
colortransparent !important;
  
box-shadownone !important;
  
text-shadow:none !important;
  
z-index999;
}

#slick .slick-prev {
    
left0px;
    
positionabsolute;
}

#slick .slick-next {
    
right25px;
    
positionabsolute;
}

#slick .slide {
  
positionrelative;
  
width100%;
}

#slick .slide img {
  
width100%;
}

#slick .slide .caption {
  
positionabsolute;
  
backgroundrgba(0,0,0,0.75);
  
bottom:0;
  
width100%;
}

#slick .slide .caption .inner {
  
padding20px;
}

#slick .slide .caption h1 {
    
color#fff;
    
font-size1.5em;
    
margin:0 0 .5em 0;
}

#slick .slide .caption p {
  
color#fff;
  
margin0;
}

#slick .slide .caption a.button {
  
padding10px 20px;
  
margin0px 0px 20px 20px;
  
box-shadownone !important;
  
displayinline-block;
{name}
Rank

Total Posts: 23

Joined 2015-08-06

PM

 

Casey, I really appreciate the tremendous support. It’s incredibly helpful.

I’ll be implementing this today and will report back.

{name}
Rank

Total Posts: 23

Joined 2015-08-06

PM

 

Casey, the Slick plugin worked perfectly. I’ll forward you a link once it’s live.

Thank you again for introducing the solution and for taking your valuable time to detail the approach.

This is phenomenal support.