?
Solved

Creating a slider

Posted on 2016-11-14
12
Medium Priority
?
108 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
11 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 60

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 Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 60

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 60

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 60

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

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.

Question has a verified solution.

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

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…
Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
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…
Suggested Courses
Course of the Month13 days, 16 hours left to enroll

807 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