?
Solved

Creating a slider

Posted on 2016-11-14
12
Medium Priority
?
94 Views
Last Modified: 2016-11-15
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
Comment
Question by:Cathryn Warren
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 4
12 Comments
 

Author Comment

by:Cathryn Warren
ID: 41887267
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
 
LVL 59

Expert Comment

by:Julian Hansen
ID: 41887417
We need to see more code and a link if possible. What does your JavaScript look like for instance.
0
 

Author Comment

by:Cathryn Warren
ID: 41887495
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 59

Expert Comment

by:Julian Hansen
ID: 41887518
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
 

Author Comment

by:Cathryn Warren
ID: 41887521
I removed the background because it wasn't working. This is the link at the moment - site.
0
 
LVL 59

Accepted Solution

by:
Julian Hansen earned 2000 total points
ID: 41887551
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
 

Author Comment

by:Cathryn Warren
ID: 41887569
Thank you so much Julian I really appreciate it!
0
 

Author Closing Comment

by:Cathryn Warren
ID: 41887572
Thank you!
0
 
LVL 59

Expert Comment

by:Julian Hansen
ID: 41887630
You are most welcome.
0
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 41887635
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
 

Author Comment

by:Cathryn Warren
ID: 41888783
Thanks Ray, that's a very good point. Taken on board.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

649 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question