[Resolved] Help using BxSlider with Views

[Author]

Posts

[timB]

As a veteran user of Views and Types, previously with the Genesis Theme Framework, I am now trying to build a site from scratch using the Toolset Starter Theme and Child theme.

This site, and others I do like it, will require me to use BxSlider, the JQuery slider utility here:
hidden link because of its versitility and variety of appearance.

So I placed the .js and .css files in my child theme folder (domain.com/wp-content/themes/toolset-starter-child) and I'm referencing the scripts by modifying the child theme's function.php so the first portion reads like this:

if ( ! function_exists( 'ref_enqueue_main_stylesheet' ) ) {
	function ref_enqueue_main_stylesheet() {
		if ( ! is_admin() ) {
			wp_enqueue_style( 'main', get_template_directory_uri() . '/style.css', array(), null );
			wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array(), null );

/* THESE ARE THE SCRIPTS AND STYLE REQUIRED FOR BxSlider */
   wp_enqueue_script( 'script', '//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js', array ( 'jquery' ), '1.8', true);
   wp_enqueue_script( 'script', get_stylesheet_directory_uri() . '/jquery.bxslider.min.js', array ( 'jquery' ), '1.8', true);
   wp_enqueue_style( 'bxslider-style', get_stylesheet_directory_uri() . '/jquery.bxslider.css', array(), null );

		}
	}
	add_action( 'wp_enqueue_scripts', 'ref_enqueue_main_stylesheet', 100 );
}

The view I wrote for a simple bxquery doesn't work however. It is meant to slide through the featured images of posts, but It simply returns a list of images from them, as if the bxslider code isn't being called at all. Following is the view, css and js - does it look like I'm following the instructions correctly (see hidden link) or should I be referencing the css and js in another way?

View

	<!-- wpv-loop-start -->
<ul class="mainslider bxslider">
		<wpv-loop>
          [wpv-post-body view_template="MainSliderImage"]
		</wpv-loop>
</ul>
	<!-- wpv-loop-end -->

View Template

<li>[wpv-post-featured-image size='homeslidermain']</li>

CSS

.mainslider li{list-style:none;}

JS

$(document).ready(function(){
  $('.bxslider').bxSlider();
});

- you can see how the resulting page looks here:
hidden link

I know I must be doing something wrong, so would be very grateful for any help you can give to drive me in the right direction. If I can get bxslider to work with Views it will open the door to big opportunities...

Many thanks
Tim

[Luo Yang]

Dear Tim,

The URL you mentioned above (hidden link) is not available, I see below error:
This site can’t be reached
beautydrill.com took too long to respond.

Please check it, and the problem you mentioned above is a custom codes problem, if you need more assistance for it, please provide a test site with same problem, and fill below private detail box with login details and ftp access. I need a live website to test and debug, thanks

[Luo Yang]

Could you provide the FTP access too?
I need to edit the PHP codes.

[Luo Yang]

Still same problem, when I open the URL hidden link or the login URL you provided, both are not valid, in my Chrome browser display this error:
This site can’t be reached
beautydrill.com took too long to respond.
Please check it, and my IP address is: 47.89.50.44

And you mentioned above: The site has been slow, I don't think it is a good place to test and debug.

[timB]

Hi Luo

The server where this site is hosted is the server I use for all my sites, development or otherwise. Its normally fine.

I have just been onto the hosts and some checks and changes were done. Can you try again now please and let me know how you get on...

hidden link
hidden link

They're both loading well here.
Thank you
Tim

[timB]

Hi again Luo

I've made some progress... thanks for your heads up that it was an issue with the custom codes.
I have removed the wp_enqueue_scripts calls in the theme functions.php, and instead installed a plugin which lets me specify script calls in the header/footer of the page.

So, I have now managed to get the bxslider working. But not how I need it. I hope you can help me to sync two sliders in the way we're trying to get them.

This page shows how the code should work, and how we want the sliders to interact with each other (so when one is clicked in the carousel, it is found in the slider, and when one is the focus in the slider, it is scrolled to in the carousel...:
hidden link

I have managed to get bxslider working in a simple slider on this page:
hidden link

In that example, the bxslider java script is called from within the view, and the slides are within [ul] tags and given the id bxslider. The javascript is as follows:

$(document).ready(function(){
  $('.mainslider').bxSlider({
  mode: 'fade',
  auto: true,
  autoControls: false,
  pause: 5000
  });
});

I next tried to see what would happen if I put the View within a content template, and used the javascript in the content template instead of in the View. You can see the results here:

hidden link
And it works fine.

The purpose of that was to see if I could put both sliders in one content template and run the JS for both of them from that content template's JS editor.

So that's what I tried, and I used the JS from the jsfiddle page given earlier in the Content Template. But the outcome is this: hidden link - so you see the JS breaks for some reason, and I'm not good enough with JS to understand why.

If you're able to login to beautydrill.com, I would be grateful if you could have a look at this Content Template: GalleryNavContainer - It contains the following HTML:

<div class="gallery-container">
<div class="row">
  <div class="col-md-10">
  [wpv-view name="homegallery"]
  </div>
  <div class="col-md-2">
  [wpv-view name="homegallerythumbs"]
  </div>  
</div>

... and each of those views use the [ul] IDs for bxslider and bxslider-pager as per the JSfiddle, and runs the following javascript (as per the js fiddle).

So are you able to help me fix this script, called from the holding content template for the two views accordingly, so it works...?

$(document).ready(function(e){
 var $j = jQuery.noConflict();

var realSlider= $j("ul#bxslider").bxSlider({
      mode: 'fade',
      auto: true,
      autoControls: true,
      pause: 2000
      onSlideBefore:function($slideElement, oldIndex, newIndex){
        changeRealThumb(realThumbSlider,newIndex);
        
      }
      
    });
  
    
    var realThumbSlider=$j("ul#bxslider-pager").bxSlider({
      minSlides: 4,
      maxSlides: 4,
      slideWidth: 156,
      slideMargin: 12,
      moveSlides: 1,
      pager:false,
      speed:1000,
      infiniteLoop:false,
      hideControlOnEnd:true,
      nextText:'<span></span>',
      prevText:'<span></span>',
      onSlideBefore:function($slideElement, oldIndex, newIndex){
        /*$j("#sliderThumbReal ul .active").removeClass("active");
        $slideElement.addClass("active"); */

      }
    });
    
    linkRealSliders(realSlider,realThumbSlider);
    
    if($j("#bxslider-pager li").length<5){
      $j("#bxslider-pager .bx-next").hide();
    }

// sincronizza sliders realizzazioni
function linkRealSliders(bigS,thumbS){
  
  $j("ul#bxslider-pager").on("click","a",function(event){
    event.preventDefault();
    var newIndex=$j(this).parent().attr("data-slideIndex");
        bigS.goToSlide(newIndex);
  });
}

//slider!=$thumbSlider. slider is the realslider
function changeRealThumb(slider,newIndex){
  
  var $thumbS=$j("#bxslider-pager");
  $thumbS.find('.active').removeClass("active");
  $thumbS.find('li[data-slideIndex="'+newIndex+'"]').addClass("active");
  
  if(slider.getSlideCount()-newIndex>=4)slider.goToSlide(newIndex);
  else slider.goToSlide(slider.getSlideCount()-4);

}

  
});

[Luo Yang]

The new question is a custom JS codes problem, I am not familiar with the bxslider, according to our support policy, we do not provide custom codes support:
https://toolset.com/toolset-support-policy/

I suggest you ask help from the author of BxSlider, or you can check out our certified partners for it:
https://toolset.com/consultant/

[timB]

Its not a bxslider issue as far as I can see, Luo. The code above works, as is proved by the jsfiddle page. My query is about how to place JS in a view template so that it affects two Views within it.

I don't expect to get any help from bxslider about that therefore.
I quite understand if it is outside your scope of expertise however, so I will post the question again with a different context.

Thank you
Tim

[Luo Yang]

Your website is very slow, it is hard to debug in such a environment. I have to wait 10 minutes to open the problem page
hidden link
see screenshot finish-time.JPG, after 8 minutes, it is till in loading status.
I can not even open the content template "GalleryNavContainer", I see a blank page.

For the new questions:
Q1) My query is about how to place JS in a view template so that it affects two Views within it.
You can put two view's shortcode into same content template, and put the JS codes in this content template, then the JS codes should be able to take effect on both views.
See our document:
https://toolset.com/documentation/user-guides/view-templates/
section "4. Inline CSS and Javascript editors for Content Templates "

Q2) how we want the sliders to interact with each other (so when one is clicked in the carousel, it is found in the slider, and when one is the focus in the slider, it is scrolled to in the carousel...:
In the problem URL:
hidden link
There is a JS error:
(index):295 Uncaught SyntaxError: Unexpected identifier
It is from the custom JS codes you mentioned above, where is those custom codes from? is there any document for it?
I checked the document of bxslider, there is an demo which is very simple for your case:
hidden link
The JS codes is simple, and the HTML structure is very simple too, I suggest you try this first.

Again, this new question is a custom JS codes problem, you can check out our certified partners for it:
https://toolset.com/consultant/

[timB]

Thank you Luo
That is helpful. I will, as you say, revert to a simpler solution first and build up from there.

Apologies for the slow state of the website where you are. It is working fine for us here. We will look into what can be done about that prior to launch.

Thanks again
Tim