Solved

Creating a slider

Posted on 2016-11-14
12
53 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 55

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
Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

 
LVL 55

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 55

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 55

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

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

Suggested Solutions

Title # Comments Views Activity
CSS Header Navigation Not Responsive 4 30
Currency in SQL? 2 31
Help with PHP 13 27
Using HTML5 and CSS How to place one element in front of another elemen 7 34
Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
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…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

828 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