Solved

Creating a slider

Posted on 2016-11-14
12
49 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
  • 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 54

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
Problems using Powershell and Active Directory?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

 
LVL 54

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 54

Accepted Solution

by:
Julian Hansen earned 500 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 54

Expert Comment

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

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

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

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

Suggested Solutions

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

821 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