Slider For Theme

Add to “post page options”

In Post Page Meta

      <div class="all_slides_wrapper">
      
	      <div class="b_slides_header">Slide Show</div>
	      
	      <div id="add_a_slide">ADD SLIDE</div>
	      <div id="added_slides_div">
	      
		      <? $count = 1; ?>
		      <? if (!empty($post_page_options['slider_image_urls'])) { foreach ($post_page_options['slider_image_urls'] as $key => $slider_image_url) { ?>
			    <? if (!empty($slider_image_url)) { ?>  
				    <? $fileParts = pathinfo($slider_image_url); $filename = $fileParts['filename']; ?>
						<div class='slide_wrapper' id='slide_wrapper_<? echo $count; ?>'>
							<span class="drag_indicator"></span>
							<div class="lw_class_on_off slide_toggle" data-what="parent" data-what-class="on">Slide <? echo $count; ?> <span>(<? echo $filename; ?>)</span></div>
							<div class="slide_data_wrap">
								<label>Slide File</label>
								<input type='file' name='added_image_file' class='add_slider_image_file' >
								<label>Slide Src</label>
								<input type='text' name='slider_image_urls[]' class='slider_image_url' value='<? echo $slider_image_url; ?>'>
								<div class='slider_image_display'><img src="<? echo $slider_image_url; ?>" class="backend_slider_image" /></div>
								<label>Slide Link</label>
								<input type='text' name='slider_image_links[]' value='<? echo $post_page_options['slider_image_links'][$key]; ?>'>
									<div class="delete_slide_holder"> <span class="delete_slide" data-what-slide="slide_wrapper_<? echo $count; ?>">DELETE SLIDE</span></div>
							</div>
						</div>
				        <? $count++; ?>
				<? } ?>        
		      <? } } ?>
	      
	      </div>
      </div>

In backend.css and add “drag_n_drop.png to image file

.all_slides_wrapper {
	padding: 25px;
	background-color: #E5E5E5;
	margin-bottom: 25px;
}

.b_slides_header {
	font-size: 32px;
	font-weight: bold;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-bottom: 25px;
}

#add_a_slide {
	background-color: #ffffff;
	text-transform: uppercase;
	text-align: center;
	display: inline-block;
	vertical-align: top;
	cursor: pointer;
	border: 2px solid #EE2D24;
	padding: 5px 15px;
	margin-bottom: 25px;
	font-weight: bold;
	letter-spacing: 1px;
}

.slide_wrapper {
	padding: 25px;
	margin-bottom: 25px;
	background-color: #C9C7C7;
	position: relative;
}

.slide_wrapper label {
	display: block;
}

.slide_wrapper input {
	width: 100%;
	margin-bottom: 15px;
}

.slider_image_display {
	background-size: cover;
	background-position: center;
}

.backend_slider_image {
	max-height: 250px;
	max-width: 100%;
}

.slide_toggle {
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 20px;
	cursor: pointer;
}

.slide_toggle span {
	font-size: 12px;
	font-weight: normal;
}

.slide_data_wrap {
	display: none;
}

.on .slide_data_wrap {
	display: block;
}

.delete_slide_holder {
	text-align: right;	
}

.delete_slide {
	cursor: pointer;
}

In backend_scripts

	$( "#add_a_slide" ).click(function() { //2AM ON AND OFF

		var add_slide_html  = "<div class='slide_wrapper'>";
		    add_slide_html += "  <label>Slide File</label>";
		    add_slide_html += "  <input type='file' name='added_image_file' class='add_slider_image_file' >";
		    add_slide_html += "  <label>Slide Src</label>";
		    add_slide_html += "  <input type='text' name='slider_image_urls[]' class='slider_image_url' >";
		    add_slide_html += "  <div class='slider_image_display'></div>";
		    add_slide_html += "  <label>Slide Link</label>";
		    add_slide_html += "  <input type='text' name='slider_image_links[]'>";
		    add_slide_html += "</div>";
		
		$('#added_slides_div').append(add_slide_html);
	   
	}); //2AM ON AND OFF	
	
	$( ".delete_slide" ).click(function() { //2AM ON AND OFF
	
		var what_slide     = '#'+$(this).attr("data-what-slide");

        var confirmed = confirm("Delete Slide?");
        
		if (confirmed == true) {
		    $(what_slide).remove();
		}
	   
	}); //2AM ON AND OFF	
			
	$(document).on('change', '.add_slider_image_file', function() {
	
	    var parent_div = $(this).parent();
	    
	    
	
		var append_where     = $(this).attr("data-append-where");
	
	
	    formdata = false;
	    
		  if (window.FormData) {
		    formdata = new FormData();
		    var uploaded_image = this.files;
		    formdata.append("uploaded_image", uploaded_image[0]);
		    formdata.append("action", "em_pic_handler");
		  }
		  
		  
		if (formdata) {
		  $.ajax({
		    url: ajax_url,
		    type: "POST",
		    data: formdata,
		    processData: false,
		    contentType: false,
		    success: function (res) {
	
				response = JSON.parse(res);
				
				console.log(response.status);
				
				parent_div.children('.slider_image_display').css('height','250px');

				//parent_div.children('.slider_image_display').css('background-image','url("'+response.url+'")');
				
				parent_div.children('.slider_image_display').html('<img src="'+response.url+'" class="backend_slider_image" />');
				
				parent_div.children('.slider_image_url').val(response.url);
	
		    }
		  });
		}
				
	});
	
	if ( $.isFunction($.fn.sortable) ) { 

	    $( "#added_slides_div" ).sortable({    placeholder: "ui-sortable-placeholder", handle: ".drag_indicator"   }); // MAKES ADMIN SLIDES SORTABLE 
    }

Add em_pic_handler.php to funtions file and folder

Add slick.min.js and call it in the header

Add this to theme

<div class="all_slides_wrapper" data-cycle-slides="> a">
<? $count = 1; ?>
<? if (!empty($post_page_options['slider_image_urls'])) { foreach ($post_page_options['slider_image_urls'] as $key => $slider_image_url) { ?>
	<? if (!empty($slider_image_url)) { ?>  
		 <? if (empty($post_page_options['slider_image_links'][$key])) { $post_page_options['slider_image_links'][$key] = "#"; } ?>
		 <div class="single_slide_wrap">
	     <a href="<? echo $post_page_options['slider_image_links'][$key]; ?>" class='single_slide' id='single_slide_<? echo $count; ?>' style="background-image: url('<? echo $slider_image_url; ?>');">

	     </a>
	     </div> 
	     <? $count++; ?>
	<? } ?>        
<? } } ?>
</div>

Add this to frontend call

	$('.all_slides_wrapper').slick({
	  centerMode: true,
	  centerPadding: '150px',
	  slidesToShow: 1,
	  responsive: [
	    {
	      breakpoint: 768,
	      settings: {
	        arrows: false,
	        centerMode: true,
	        centerPadding: '40px',
	        slidesToShow: 1
	      }
	    },
	    {
	      breakpoint: 480,
	      settings: {
	        arrows: false,
	        centerMode: true,
	        centerPadding: '40px',
	        slidesToShow: 1
	      }
	    }
	  ]
	});