CSS for slider breaking and it's my fault

Hi Guys,

I’m working from a responsive HTML template and getting stuck due to rusty HTML/CSS skills.

It has a section for text quotes, which I reordered on the page - easy. Then I duplicated it to use for a logo slider and got into trouble. I duplicated all the CSS for the text quotes and renamed each from quote.whatever to logo.whatever because when I didn’t the < and > controls doubled up in each slider area. That resolved the doubling problem, but the functionality broke completely. Now, my test images (not logos yet) just stack vertically. I cannot figure out why.

Also, the <h1> text for that section is smaller and thicker looking than other <h1>'s on the page. All I created was a modifier to change the text color to white. ???

http://ehydrant.com/KLTest/index.html

The logo slider starts at line 546 and the CSS is here: http://ehydrant.com/KLTest/css/style.css

Can anyone help me figure out what I’m doing so wrong?

Thank you!

I would suggest that you correct your page’s coding errors first…

https://validator.w3.org/nu/?doc=http%3A%2F%2Fehydrant.com%2FKLTest%2Findex.html

It may resolve your problem.

coothead

Thanks coothead. I did that - just down to two header warnings.

Any thoughts on next steps?

Hi syakoban,
On your slider that IS working, <ul class="quote-slider">
FF Inspector shows the ul and li to have inline styles that are being inserted by the bxslider.min.js

The list items are being floated left.

Now, my test images (not logos yet) just stack vertically. I cannot figure out why.

Yes, that is the default styling for list items
Actually it would be display:list-item; showing the bullets but you are resetting that in your base.css to list-style: none; on the ul.

So the end result is display:block; which would stack vertically.

Thanks much Ray.

I get what you’re saying in theory, but not from a practical standpoint. I’m using the same code as the text quote slider above and that works as expected. In fact, as a test, I originally stuck the images in with the text and that worked properly. So why would it work for text or text and images and not images alone?

Also, I’m calling the same H1 as everywhere else on the page and that is coming up differently too. Why would something change that?

If I’ve understood this correctly (and JS is not my forte, so I could be quite wrong), @Ray.H says your script is dynamically adding inline styling to the <li>s in the HTML. This works for the first slider, but not for the second one, because you changed the class names there, and the script therefore does not identify them as targets for the inline styling.

That’s correct, I should have mentioned that specifically.
It is dependent on the .quote-slider class.

The H1 tags everywhere else have the class of .title on the parent div which is picking up the .title h1 styles

<div class="eight col center title grid-mb">
	<h1>Why Me</h1>
    ...
    ...
</div>

The H1 you added has a class on the H1 tag rather than the parent div and it is also missing the .title class on the parent

<div class="eight col center">
    <h1 class="logotext">Sources Quoting Me</h1>
    ...
    ...
</div>
1 Like

Thank you guys.

I totally missed the class for the title H1 heading. I wish the syntax between multiple classes included a delimiter like a comma, but they won’t change the spec for me. :wink:

As far as the slider: yeah I switched back to the <ul class="quote-slider"> but that brought back the problem that I originally had and inspired me to duplicate all the slider classes: two sets of < and > in each slider.

Isn’t that happening because the classes are used twice in the page?

As far as css specs go, it is ID’s that can’t be used twice.
The whole point of classes is to use them multiple times.

It does look like there is some kind of a conflict with your script and multiple classes. Not confirmed, but evidence is pointing that direction.

Your raw html for the slider controls looks like this…

<!-- Controls for the quote slider -->
<div class="q-control">
    <p><span class="q-prev"></span><span class="q-next"></span></p>
</div>

The script is inserting the <a> and <i> tags which are displaying the arrows, but as you say it is doubling them up, which indicates a conflict in the script.

<div class="q-control">
    <p>
        <span class="q-prev">
            <a class="bx-prev" href="">
                <i class="fa fa-angle-left"></i></a>
            <a class="bx-prev" href="">
                <i class="fa fa-angle-left"></i></a>
        </span>
        <span class="q-next">
            <a class="bx-next" href="">
                <i class="fa fa-angle-right"></i></a>
            <a class="bx-next" href="">
                <i class="fa fa-angle-right"></i></a>
        </span>
    </p>
</div>

So the only fix is a js change?

I was looking to see if I can cheat in a non-preferred way and call a second instance of the script w/another name, but I don’t see where the script is even called.

That’s my conclusion, since the script is inserting the <a> and <i> tags.

Maybe one of the mods can move this to the js forum so they can help with a solution. :slight_smile:

Done.

Why not do it the preferred way?

Where do you call the script?

Example code from Multiple slideshows

$('#slider1').bxSlider({
  mode: 'fade',
  auto: true,
  autoControls: true,
  pause: 2000
});

$('#slider2').bxSlider({
  auto: true,
  autoControls: true,
  pause: 3000,
  slideMargin: 20
});
<h3>Slideshow 1</h3>
<ul id="slider1">
  <li><img src="/images/730_200/hill_trees.jpg" /></li>
  <li><img src="/images/730_200/me_trees.jpg" /></li>
  <li><img src="/images/730_200/houses.jpg" /></li>
</ul>

<h3>Slideshow 2</h3>
<ul id="slider2">
  <li><img src="/images/730_200/tree_root.jpg" /></li>
  <li><img src="/images/730_200/trees.jpg" /></li>
  <li><img src="/images/730_200/hill_road.jpg" /></li>
</ul>
1 Like

Thanks Mittineague.

I would like the preferred way but I don’t know JS.

Can you explain what you posted?

Also, I only have the minified version of the bxslider. Test page is here.

You also have the jquery.bxslider.css file.

The jquery.bxslider.js file should have been extracted from the same zip file as the two you are using.

In any case, using or even looking at the unminified version is unlikely to be of much help to you.

What I see in your page, or rather what I don’t see, is where you have put the JavaScript code that calls the boxslider script.

Once you have the <ul> with a unique id in the page’s HTML, before the closing </body> add the JavaScript


<script>
$(‘#slider1’).bxSlider({
mode: ‘fade’,
auto: true,
autoControls: true,
pause: 2000
});
</script>
^lt;/body>

where “#slider1” is the id of the <ul>

EDIT
Now I see it. It’s in the main.js file
http://ehydrant.com/KLTest/js/main.js

	/* ==================== 06. Quote slider ==================== */
	$('.quote-slider').bxSlider({
		mode: 'horizontal',
		pager: false,
		controls: true,
		nextSelector: '.q-next',
		prevSelector: '.q-prev',
		nextText: '<i class="fa fa-angle-right"></i>',
		prevText: '<i class="fa fa-angle-left"></i>',
		adaptiveHeight: true
	});


	/* ==================== 07. Image slider ==================== */
	$('.img-slider').bxSlider({
		mode: 'fade',
		pager: true,
		controls: true,
		nextText: '<i class="bs-right fa fa-angle-right"></i>',
		prevText: '<i class="bs-left fa fa-angle-left"></i>',
		adaptiveHeight: true
	});


	/* ==================== 08. Fullwidth background slider ==================== */
	$('.fw-bg-slider').bxSlider({
		mode: 'fade',
		auto: true,
		speed: 1500,
		pause: 5000,
		pager: false,
		controls: false,
		nextText: '<i class="bs-right fa fa-angle-right"></i>',
		prevText: '<i class="bs-left fa fa-angle-left"></i>'
	});


	/* ==================== 09. Fullwidth background and content slider ==================== */
	$('.fw-bgc-slider').bxSlider({
		mode: 'fade',
		pager: true,
		controls: true,
		nextText: '<i class="bs-right fa fa-angle-right"></i>',
		prevText: '<i class="bs-left fa fa-angle-left"></i>'
	});

The HTML has two tags with the class “quote-slider” (lines 175 and 551), one tag with the class “img-slider” (line 430) and no tags with either “fw-bg-slider” or “fw-bgc-slider”

I believe the script was written under the assumption that each target would be unique (id not class)

If you change both the HTML and the JavaScript to be using ids it should work better.

Thank you for the thorough review.

This is based on a template so Fullwidth background slider is not being used.

I duplicated the Quote slider JS in a section at the bottom of main.js and renamed the second HTML call for a slider to “logo-slider”. The problem of double < and > still persists. depending upon what I try, it’s gone back and forth between list items being stacked or the doubling issue.

I don’t know JS, but from a basic troubleshooting approach, I can’t figure out why. :cold_sweat:

You need to rename the class on the second controls as you are calling two routines and the controls get added twice.

e.g.

   <!-- Controls for the quote slider -->
      <div class="q-control"> 
        <p><span class="q-prev2"></span><span class="q-next2"></span></p>
      </div>

and then:

/* ==================== 18. logo slider ==================== */
	$('.logo-slider').bxSlider({
		mode: 'horizontal',
		pager: false,
		controls: true,
		nextSelector: '.q-next2',
		prevSelector: '.q-prev2',
		nextText: '<i class="fa fa-angle-right"></i>',
		prevText: '<i class="fa fa-angle-left"></i>',
		adaptiveHeight: true
	});

I just added a 2 to the classes in all the above (q-next2’, q-prev2’) etc…

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.