<?php $__env->startSection('seo_title', $global_other_page_items->page_portfolios_seo_title); ?>
<?php $__env->startSection('seo_meta_description', $global_other_page_items->page_portfolios_seo_meta_description); ?>

<?php $__env->startSection('content'); ?>


<section class="page-title" style="background-image: url(<?php echo e(asset('uploads/'.$global_setting->banner)); ?>);">
    <div class="auto-container">
        <div class="title-outer">
            <h1 class="title"><?php echo e($global_other_page_items->page_portfolios_title); ?></h1>
            <ul class="page-breadcrumb">
                <li><a href="<?php echo e(route('home')); ?>"><?php echo e(__('Home')); ?></a></li>
                <li><?php echo e($global_other_page_items->page_portfolios_title); ?></li>
            </ul>
        </div>
    </div>
</section>
<style>
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0; /* Optional: Background color for better visibility */
}

.juk {
   width: 600px;   /* Fixed width */
height: 400px;  /* Fixed height */
background-color: lightgray; /* Background color for visibility */
}
.carousel-container {
    padding: 20px; /* Space around the carousel */
    display: flex;
    justify-content: center; /* Center the carousel */
}

.carousel {
    position: relative;
    max-width: 1600px; /* Width of the carousel */
    height: 800px;    /* Height of the carousel */
    margin: auto;
    overflow: hidden;
    border-radius: 10px; /* Optional: Rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Optional: Shadow for depth */
}

.carousel-images {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;            /* Set to 100% of the parent width */
    height: 100%;
}

.carousel-images img {
    width: 100%;            /* Set to 100% of the parent width */
    height: 100%;           /* Set to 100% of the parent height */
    object-fit: cover;      /* Ensures images cover the area without distortion */
    flex: 0 0 100%;         /* Flex-basis set to 100% to ensure only one image is shown at a time */
}

button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.8);
    border: none;
    padding: 10px;
    cursor: pointer;
    border-radius: 5px; /* Optional: Rounded button corners */
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}
</style>
<br>
        <br>

<div class="carousel" >
        <div class="carousel-images">
           <img src="https://knuckleball.avantcommunications.co.ke/uploads/portfolio_1741707895.jpg">
			<img src="https://knuckleball.avantcommunications.co.ke/uploads/portfolio_1740385702.jpg">
			<img src="https://knuckleball.avantcommunications.co.ke/uploads/portfolio_1740575811.jpg">
			<img src="https://knuckleball.avantcommunications.co.ke/uploads/portfolio_1740575528.jpg">
			<img src="https://knuckleball.avantcommunications.co.ke/uploads/portfolio_1740575441.jpg">
			<img src="https://knuckleball.avantcommunications.co.ke/uploads/portfolio_1740575348.jpg">
			<img src="https://knuckleball.avantcommunications.co.ke/uploads/portfolio_1740575263.jpg">
			<img src="https://knuckleball.avantcommunications.co.ke/uploads/portfolio_1740575071.jpg">
			<img src="https://knuckleball.avantcommunications.co.ke/uploads/portfolio_1740384768.jpg">
			<img src="https://knuckleball.avantcommunications.co.ke/uploads/portfolio_1740574571.jpg">
			<img src="https://knuckleball.avantcommunications.co.ke/uploads/portfolio_1740385824.jpg">
			<img src="https://knuckleball.avantcommunications.co.ke/uploads/portfolio_1740385766.jpg">
			<img src="https://knuckleball.avantcommunications.co.ke/uploads/portfolio_1739816834.jpg">
		<img src="https://knuckleball.avantcommunications.co.ke/uploads/portfolio_1740384452.jpg">
			<img src="https://knuckleball.avantcommunications.co.ke/uploads/portfolio_1740385896.jpg">
		<img src="https://knuckleball.avantcommunications.co.ke/uploads/portfolio_1741609773.jpg">
			<img src="https://knuckleball.avantcommunications.co.ke/uploads/portfolio_1741605531.jpg">
			<img src="https://knuckleball.avantcommunications.co.ke/uploads/portfolio_1741708484.jpg">
			<img src="https://knuckleball.avantcommunications.co.ke/uploads/portfolio_1741708016.jpg">
			<img src="https://knuckleball.avantcommunications.co.ke/uploads/portfolio_1741608785.jpg">
			<img src="https://knuckleball.avantcommunications.co.ke/uploads/portfolio_1741707983.jpg">
			<img src="https://knuckleball.avantcommunications.co.ke/uploads/portfolio_1740385945.jpg">
			<img src="https://knuckleball.avantcommunications.co.ke/uploads/portfolio_1741708062.jpg">
			<img src="https://knuckleball.avantcommunications.co.ke/uploads/portfolio_1741609715.jpg">
			<img src="https://knuckleball.avantcommunications.co.ke/uploads/portfolio_1741605829.jpg">
			
        </div>
        
        <button class="prev" onclick="changeSlide(-1)">&#10094;</button>
        <button class="next" onclick="changeSlide(1)">&#10095;</button>
        
    </div>
<br>
        <br>
    <script src="script.js"></script>
<script>
let currentIndex = 0;
const images = document.querySelectorAll('.carousel-images img');

function showSlide(index) {
    if (index >= images.length) {
        currentIndex = 0;
    } else if (index < 0) {
        currentIndex = images.length - 1;
    } else {
        currentIndex = index;
    }
    const offset = -currentIndex * 100;
    document.querySelector('.carousel-images').style.transform = `translateX(${offset}%)`;
}

function changeSlide(step) {
    showSlide(currentIndex + step);
}

function autoPlay() {
    showSlide(currentIndex + 1);
}

setInterval(autoPlay, 3000); // Change slide every 3 seconds
</script>


<!--
<style>
    .splide__slide img {
  width: 100%;
  height: auto;
}

.splide__slide img {
  width: 100%;
  height: 50%;
  object-fit: cover;
}


</style>

    
<section id="image-carousel" class="splide" aria-label="Beautiful Images">
    
  <div class="splide__track">
		<ul class="splide__list">

			<li class="splide__slide"><img src="https://knuckleball.avantcommunications.co.ke/uploads/portfolio_1741707895.jpg"></li>
			<li class="splide__slide"><img src="https://knuckleball.avantcommunications.co.ke/uploads/portfolio_1740385702.jpg"></li>
			<li class="splide__slide"><img src="https://knuckleball.avantcommunications.co.ke/uploads/portfolio_1740575811.jpg"></li>
			<li class="splide__slide"><img src="https://knuckleball.avantcommunications.co.ke/uploads/portfolio_1740575528.jpg"></li>
			<li class="splide__slide"><img src="https://knuckleball.avantcommunications.co.ke/uploads/portfolio_1740575441.jpg"></li>
			<li class="splide__slide"><img src="https://knuckleball.avantcommunications.co.ke/uploads/portfolio_1740575348.jpg"></li>
			<li class="splide__slide"><img src="https://knuckleball.avantcommunications.co.ke/uploads/portfolio_1740575263.jpg"></li>
			<li class="splide__slide"><img src="https://knuckleball.avantcommunications.co.ke/uploads/portfolio_1740575071.jpg"></li>
			<li class="splide__slide"><img src="https://knuckleball.avantcommunications.co.ke/uploads/portfolio_1740384768.jpg"></li>
			<li class="splide__slide"><img src="https://knuckleball.avantcommunications.co.ke/uploads/portfolio_1740574571.jpg">
</li>
			<li class="splide__slide"><img src="https://knuckleball.avantcommunications.co.ke/uploads/portfolio_1740385824.jpg"></li>
			<li class="splide__slide"><img src="https://knuckleball.avantcommunications.co.ke/uploads/portfolio_1740385766.jpg"></li>
			<li class="splide__slide"><img src="https://knuckleball.avantcommunications.co.ke/uploads/portfolio_1739816834.jpg"></li>
			<li class="splide__slide"><img src="https://knuckleball.avantcommunications.co.ke/uploads/portfolio_1740384452.jpg"></li>
			<li class="splide__slide"><img src="https://knuckleball.avantcommunications.co.ke/uploads/portfolio_1740385896.jpg"></li>
			<li class="splide__slide"><img src="https://knuckleball.avantcommunications.co.ke/uploads/portfolio_1741609773.jpg"></li>
			<li class="splide__slide"><img src="https://knuckleball.avantcommunications.co.ke/uploads/portfolio_1741605531.jpg"></li>
			<li class="splide__slide"><img src="https://knuckleball.avantcommunications.co.ke/uploads/portfolio_1741708484.jpg"></li>
			<li class="splide__slide"><img src="https://knuckleball.avantcommunications.co.ke/uploads/portfolio_1741708016.jpg"></li>
			<li class="splide__slide"><img src="https://knuckleball.avantcommunications.co.ke/uploads/portfolio_1741608785.jpg"></li>
			<li class="splide__slide"><img src="https://knuckleball.avantcommunications.co.ke/uploads/portfolio_1741707983.jpg"></li>
			<li class="splide__slide"><img src="https://knuckleball.avantcommunications.co.ke/uploads/portfolio_1740385945.jpg"></li>
			<li class="splide__slide"><img src="https://knuckleball.avantcommunications.co.ke/uploads/portfolio_1741708062.jpg"></li>
			<li class="splide__slide"><img src="https://knuckleball.avantcommunications.co.ke/uploads/portfolio_1741609715.jpg"></li>
			<li class="splide__slide"><img src="https://knuckleball.avantcommunications.co.ke/uploads/portfolio_1741605829.jpg"></li>
			
		</ul>
  </div>
  
</section>

<script>
  document.addEventListener( 'DOMContentLoaded', function () {
    new Splide( '#image-carousel' ).mount();
  } );

  new Splide( '#image-carousel' ).mount();
  
  document.addEventListener( 'DOMContentLoaded', function () {
  new Splide( '#image-carousel', {
    heightRatio: 0.5,
  } ).mount();
} );

document.addEventListener( 'DOMContentLoaded', function () {
  new Splide( '#image-carousel', {
		cover      : true,
		heightRatio: 0.5,
  } ).mount();
} );

var splide = new Splide( '.splide' );


splide.on( 'autoplay:playing', function ( rate ) {
  console.log( rate ); // 0-1
} );


splide.mount();
</script>-->


<?php $__env->stopSection(); ?>
<?php echo $__env->make('front.layouts.master', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/avantcom/knuckleball.avantcommunications.co.ke/resources/views/front/portfolios.blade.php ENDPATH**/ ?>