css CUSTOM CAROUSEL（casal）

Posted 2021-05-13

<!-- CUSTOM MEMBERS MODAL CAROUSEL  -->

<script>
 jQuery(document).ready(function(evt) {
   jQuery('.modal-content a.member_link').click(function() {	
       jQuery('.modal-content a.member_link').removeClass('active_member');
       
       jQuery(this).addClass('active_member');
             
  });
   
}); 
</script>

<?php // QUERY Custom post type 'member'
    $args = array ( 'post_type' => 'member');
    $memberquery = new WP_Query ($args);
 ?>

<div class="modal fade bs-example-modal-lg" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
    	<div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <!-- <h4 class="modal-title">Modal title</h4>  -->
		</div>

<div class="container-fluid">
    <div id="custom_carousel" class="carousel slide" data-ride="carousel" data-interval="7000">
        <!-- Wrapper for slides -->
        
        
        
        <div class="col-md-3">
	        <div class="controls2">
            
	            <ul class="nav">
	                 <?php if ( have_posts() ) : while ( $memberquery->have_posts() ) : $memberquery->the_post(); ?>
	                <li data-target="#custom_carousel" data-slide-to="<?php echo $memberquery->current_post; ?>" class="<?php if( $memberquery->current_post == 0 ):?>active<?php endif; ?>"><a class="member_link" href="#"><?php the_title(); ?></a></li>
	                 <?php // echo "data to slide  " .  $memberquery->current_post; ?>
	                 <?php endwhile; endif; ?>
	                 
	            </ul>

<!--	          
	            <div class="arrow-controls">
	              <a class="left carousel-control" href="#custom_carousel" data-slide="prev">
	                <span class="glyphicon glyphicon-chevron-left"></span>
	              </a>
	              <a class="right carousel-control" href="#custom_carousel" data-slide="next">
	                <span class="glyphicon glyphicon-chevron-right"></span>
	              </a>
	            </div>
	            <img src="<?php echo $thumbnail_url[0]; ?>" alt="<?php echo $thumbnail_meta; ?>">
-->	
	
	        </div>
        </div> <!-- col-md-3 -->        
        
        
        
        <div class="col-md-9 content-left-border">
	        <div class="carousel-inner">
	            <?php if ( have_posts() ) : while ( $memberquery->have_posts() ) : $memberquery->the_post(); ?>
	            <div class="item <?php if( $memberquery->current_post == 0 ):?>active<?php endif; ?>">
	                  <?php 
	                  	$thumbnail_id = get_post_thumbnail_id(); 
	                  	$thumbnail_url = wp_get_attachment_image_src( $thumbnail_id, 'large', true );  ?>
	                <div class="container-fluid">
	                    <div class="row">
	                        <div class="col-md-4"><img class="img-responsive" src="<?php echo $thumbnail_url[0]; ?>" ></div>
	                        <div class="col-md-8">
	                            <h2 class="title_name"><?php the_title(); ?></h2>
	                            <p class="title"><?php the_field('title') ; ?></p>
	                            <p><?php the_content() ; ?></p>
			                    <div class="row contact-section1">
			                    	<div class="col-md-6">
			                    		<p><i class="fa fa-phone orange"></i>&nbsp; <?php the_field('phone_number') ;  ?></p>
			                    		<p><i class="fa fa-envelope orange"></i>&nbsp; <a href="mailto: <?php the_field('email') ;  ?>"><?php the_field('email') ;  ?></a></p>
			                    		
			                    	</div>
			                    	<div class="col-md-6">
			                    		<a class="btn-vcard" href="<?php the_field('vcard') ;  ?>" target="_self" role="button">DOWNLOAD VCARD</a>
			                    	</div>	                    	
			                    </div>
			                    
			                    <div class="row contact-section2">
			                    	<div class="col-md-12">
			                    	<div class="connect_social">CONNECT WITH ME</div>
										<a target="_blank" href="<?php the_field('facebook_link') ;  ?>"><i class="fa fa-facebook white"></i></a>&nbsp;&nbsp;
										<a target="_blank" href="<?php the_field('linkedin_link') ;  ?>"><i class="fa fa-linkedin white"></i></a>&nbsp;&nbsp;
										<a target="_blank" href="<?php the_field('instagram_link') ;  ?>"><i class="fa fa-instagram white"></i></a>                    	
			                    		
			                    	</div>	                    	
			                    </div>		                                                        
	                        </div>
	                    </div>
                    
	                    
	                </div>            
	            </div> <!-- End Item -->
	            
	            
	   
	            
	            
	         <?php endwhile; endif; ?>
	        </div>
	        <!-- End Carousel Inner -->
        </div> <!-- col-md-9 -->
     
        
        
    </div>
    
    <!-- End Carousel -->
</div> 
  





    </div>
  </div>
</div>



<!--  CAROUSEL END -->

_

#custom_carousel .item {
    color:#000;
    /* background-color:#eee;  */
    padding:20px 0;
}

#custom_carousel .item p{
    color:#fff;
}

#custom_carousel .controls{
    overflow-x: auto;
    overflow-y: hidden;
    padding:0;
    margin:0;
    white-space: nowrap;
    text-align: center;
    position: relative;
    background:#ddd
}
#custom_carousel .controls li {
    display: table-cell;
    width: 1%;
    max-width:90px
}
#custom_carousel .controls li.active {
    background-color:#eee;
    border-top:3px solid orange;
}
#custom_carousel .controls a small {
    overflow:hidden;
    display:block;
    font-size:10px;
    margin-top:5px;
    font-weight:bold
}


.arrow-controls {
    padding: 20px 0;
    margin: 10px 0;
}


.modal-header {
    border-bottom: 1px solid transparent;
}


a.active_member { color:blue; }

.modal-content {
    background: rgba(0, 0, 0, 0.6);
}

.connect_social {
    color: #F68C4D;
}

h2.title_name {
    margin: 0;
    color: #F68C4D;
}

p.title {
    font-weight: bold;
    font-size: 15px;
}

a.member_link {
    color: #fff;
}

.row.contact-section1 {
    margin-top: 35px;
    margin-bottom: 30px;
    padding: 0;
}

.row.contact-section1 a {
    color: #fff;
}

.row.contact-section2 {
    margin-bottom: 20px;
}

.col-md-9.content-left-border {
    border-left: solid 1px #4E4E4E;
    margin-bottom: 25px;
}

button.close span {
    color: #F68C4D;
}