• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 147
  • Last Modified:

Creating a slider

I'm trying to edit some code which originally had a fixed background with a text slider across the top. I want to make the background and the text be a slider.

Below is what I have which is not working. I don't work with code so I may have made a hash of this!

<?php 

/** 

 * This file is responsible for the rendering of the header of the front page. 

 */ 

?> 

<!-- Home Slider --> 

<div id="home">
<?php 

        if (get_theme_mod('topslider_slides')) { 

            foreach (get_theme_mod('topslider_slides') as $slide) { 

                ?> 
 <!-- Banner Image --> 

    <div id="banner_image" class="hero_img" style="background-image:url(<?php echo $slide['slide_image']; ?>)">
    
    <!-- Banner TEXT Slides --> 

      <div id="text_slider" class="top_slider">
<div class="hero_text item"> 
                    <h3><?php echo $slide['slide_title']; ?></h3> 

                    <p><?php echo $slide['slide_desc']; ?></p>
                    
                </div>
 
    </div>
    </div>
           <?php
            }
        }
        ?>
   </div> 
<!-- Home Slider -->

Open in new window


And the CSS:

#text_slider{
    position: absolute;
    top: 0;
    left: 0;
    color: #FFF;
    display: inline-block;
    background: rgba(0, 0, 0, 0.3);
    text-align:center;
    padding-top:15%;
    height:600px;
    overflow-y:hidden;
}
.hero_text h3{
    vertical-align: middle;
    font-size: 50px;
    color: #fff;
    font-weight: 400;
    text-transform: uppercase;
}
.hero_text p {
    font-size: 18px;
    color: #fff;
}
.hero_img{
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-size:cover;
    height:600px;
}

Open in new window


It calls the right information for 'slide_image', 'slide_title' and 'slide_desc' but doesn't display properly.

Thanks to anyone who can point me in the right direction.
0
Cathryn Warren
Asked:
Cathryn Warren
  • 6
  • 4
1 Solution
 
Cathryn WarrenAuthor Commented:
The PHP function get_theme_mod returns the information entered into the Wordpress Theme Customizer for each slide.

I think the javascript would relate to the below? But I could be wrong...

		if(get_theme_mod('custom_js_code')){
			echo '<script type="text/javascript">';
   		      echo get_theme_mod('custom_js_code');
 			echo '</script>';			
		}

Open in new window

0
 
Julian HansenCommented:
We need to see more code and a link if possible. What does your JavaScript look like for instance.
0
 
Cathryn WarrenAuthor Commented:
No worries thanks Julian. I have erred on including more of the js than probably necessary.

	/*---------------------------------*/
	/*   Modules Sliders 
	/*---------------------------------*/
		
		/*Top Slider-----------------------*/
		
		    $(".top_slider").owlCarousel({
                singleItem: true,
                autoPlay: NT_CustomJS.homepage_topslider_interval,
                pagination: true,
				lazyLoad : true,
				afterInit: function() { 
						jQuery("#text_slider").addClass("loaded");
					}
            });
		
		/*gereric--------------------------*/
				
		 $(".module_slider_single_item").owlCarousel({
                        singleItem:true,
                        autoPlay: 3000,
                        pagination: true,
						afterInit: function() { 
								jQuery(".module_slider_wrapper").addClass("loaded");
								jQuery(".module_slider").addClass("loaded");
							}
						
                    });				
		 $(".module_slider_three_items").owlCarousel({
                       	items: 3,
					    autoPlay: 3000,
                        pagination: true,
						afterInit: function() { 
								jQuery(".module_slider_wrapper").addClass("loaded");
								jQuery(".module_slider").addClass("loaded");
							},
						itemsDesktop: [1200,3]
						
                    });
					
		 $(".module_slider_four_items").owlCarousel({
				items: 4,
				autoPlay: 3000,
				pagination: true,
				afterInit: function() { 
						jQuery(".module_slider_wrapper").addClass("loaded");
						jQuery(".module_slider").addClass("loaded");
					}
				
			});			
		
		/*Team-----------------------------*/
		
/*		 $(".team_slider").owlCarousel({
                        items: 3,
                        autoPlay: 3000,
                        pagination: true,
		            });
	*/
		/*Twitter--------------------------*/
		
/*		  $(".twitter_tweets").owlCarousel({
                            singleItem: true,
                            autoPlay: 3000,
                            pagination: true,
		                });*/
		
		
		/*Testimonial---------------------*/
		   
		/*	$(".testimonials_slider").owlCarousel({
				singleItem: true,
				autoPlay: NT_CustomJS.homepage_testimoial_interval,
				pagination: true,
			 });*/
			 
		/*Services------------------------*/
/*		
		 $(".Services_Carousel").owlCarousel({
        				items: 3, 
                        autoPlay: NT_CustomJS.services_slider_time,
                        pagination: true
                    });		 
           */
	

});// Ready



/* Window LOAD */
$(window).load(function(){
	
    //Delcear some Vars//
    // Get the height of nav wrapper
    var Nav_wrapper_height = $("#nav_wrapper").outerHeight();
	
	 if(NT_CustomJS.floatmenu==1){
	
	  // NAV bar offset
        var nav_bar_element = $('#nav_wrapper');
        var nav_bar_offset = nav_bar_element.offset();
        var nav_bar_offset_top =  nav_bar_offset.top;

        // Changing Header on Scrolling //

        // Show Navigation
        if($( window ).scrollTop()>=nav_bar_offset_top)
        {
            nav_bar_element.addClass("fixed");
        }
        else{
            nav_bar_element.removeClass("fixed");
        }

        // Scrolling Fixed Nav bar fix
        $(window).scroll(function() {
            // FOR HEADER MENU TO FIX ON SCROLL //
            if($( window ).scrollTop()>=nav_bar_offset_top)
            {
                nav_bar_element.addClass("fixed");
            }
            else{
                nav_bar_element.removeClass("fixed");
            }
        });
	}// floatmenu
		
	
    /* Scrolling Menues */
    $('.page-scroll a, .page-scroll-button').bind('click', function(event) {
        var $anchor = $(this);

        // Fix issues of scrolling cauisng of fixed menue
        if($("#nav_wrapper").hasClass("fixed")){
            var scrolltop = $($anchor.attr('href')).offset().top;
        }
        else{
            var scrolltop =$($anchor.attr('href')).offset().top - Nav_wrapper_height ;
        }

        // fix issue causing of not adding sectio class
        if(!$anchor.hasClass(".section"))
        {
            var scrolltop = scrolltop - Nav_wrapper_height+1;
        }

        // Now lets animate it
        $('html, body').stop().animate({
            scrollTop: scrolltop
        }, 1500, 'easeInOutExpo');
        event.preventDefault();

        // HERE WE ADD ACTIVE CLASS
        // lets remove first
        $(".page-scroll a").each(function(){
            $(this).removeClass("active");
        })
        $anchor.addClass("active");
    });

	
	

Open in new window

0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
Julian HansenCommented:
Ok but we still don't have enough to replicate the issue. Without seeing something very difficult to imagine - time required to sift through code is simply not available. The more we can visualise the quicker we find a solution.

If you can't post a link to the page - can you do a view source of your page and post that HTML here.
0
 
Cathryn WarrenAuthor Commented:
I removed the background because it wasn't working. This is the link at the moment - site.
0
 
Julian HansenCommented:
Ok a few things we learned
1. You are using the Owl carousel
2. The slides are not full height.

Now you want to add background images to the slides. What you can do is put the images into the slide containers and position them absolute with a lower z-index than the text

Here is what I managed to do with the console.
Add the image as first item in the owl-item
Remove the padding from the container and add to the text item

#text_slider {
  background: rgba(0, 0, 0, 0.3) none repeat scroll 0 0;
  color: #fff;
  display: inline-block;
  height: 600px;
  left: 0;
/*  padding: 15%; REMOVE THIS */
  overflow-y: hidden;
  position: absolute;
  text-align: center;
  top: 0;
}
.hero_text.item {
  position: relative;
  z-index: 1000;
  margin-top: 15%; /* WE PUT A 15% MARGIN RATHER THAN PADDING ON THE CONTAINER */
}
.owl-item {
 position: relative;
}
.owl-item img {
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}
/* CHANGE THE POSITIONING OF THE CONTROLS */
.owl-theme .owl-controls {
  margin-top: -50px;
  position: relative;
  text-align: center;
  z-index: 10000;
}

Open in new window

<div class="owl-item" style="width: 1583px;">
<!-- CHANGE TO BE THE IMAGE FOR THIS SLIDE -->
  <img src="mages/background1.jpg" />
  <div class="hero_text item"> 
    <h3>PLANT &amp; EQUIPMENT INSURANCE</h3> 
    <p>Plant and equipment cover for all trade and construction based industries</p> 
  </div>
</div>

Open in new window

That should do it.
1
 
Cathryn WarrenAuthor Commented:
Thank you so much Julian I really appreciate it!
0
 
Cathryn WarrenAuthor Commented:
Thank you!
0
 
Julian HansenCommented:
You are most welcome.
0
 
Ray PaseurCommented:
Going forward, you can use multiple topic areas when you post questions at E-E.  For example, you could post this sort of question in the WordPress Topic Area.  More (appropriate) topics == more sets of eyes on the problem == faster solutions!
https://www.experts-exchange.com/topics/wordpress/
1
 
Cathryn WarrenAuthor Commented:
Thanks Ray, that's a very good point. Taken on board.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 6
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now