Skip to content

Commit

Permalink
better carousel (#34)
Browse files Browse the repository at this point in the history
  • Loading branch information
@darthwing-duck
darthwing-duck authored Nov 2, 2023
1 parent 9e5caf8 commit bd8414f
Show file tree
Hide file tree
Showing 19 changed files with 4,026 additions and 73 deletions.
2 changes: 2 additions & 0 deletions _includes/head.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@
<link rel="stylesheet" href="{{ '/static/css/agency.css' | prepend: site.baseurl }}">
<link rel="stylesheet" href="{{ '/static/css/bootstrap.min.css' | prepend: site.baseurl }}">
<link rel="stylesheet" href="{{ '/static/css/mkp.css' | prepend: site.baseurl }}">
<link rel="stylesheet" href="{{ '/static/slick/slick.css' | prepend: site.baseurl }}">
<link rel="stylesheet" href="{{ '/static/slick/slick-theme.css' | prepend: site.baseurl }}">

<!-- Custom Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
Expand Down
27 changes: 15 additions & 12 deletions _includes/js.html
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,20 @@
<!-- jQuery Version 1.11.0 -->
<script src="{{ '/static/js/jquery-1.11.0.js' | prepend: site.baseurl }}"></script>
<script src="{{ '/static/js/jquery-1.11.0.js' | prepend: site.baseurl }}"></script>

<!-- Bootstrap Core JavaScript -->
<script src="{{ '/static/js/bootstrap.min.js' | prepend: site.baseurl }}"></script>
<!-- Bootstrap Core JavaScript -->
<script src="{{ '/static/js/bootstrap.min.js' | prepend: site.baseurl }}"></script>

<!-- Plugin JavaScript -->
<script src="{{ '/static/js/jquery.easing.min.js' | prepend: site.baseurl }}"></script>
<script src="{{ '/static/js/classie.js' | prepend: site.baseurl }}"></script>
<script src="{{ '/static/js/cbpAnimatedHeader.js' | prepend: site.baseurl }}"></script>
<!-- Plugin JavaScript -->
<script src="{{ '/static/js/jquery.easing.min.js' | prepend: site.baseurl }}"></script>
<script src="{{ '/static/js/classie.js' | prepend: site.baseurl }}"></script>
<script src="{{ '/static/js/cbpAnimatedHeader.js' | prepend: site.baseurl }}"></script>

<!-- Contact Form JavaScript -->
<script src="{{ '/static/js/jqBootstrapValidation.js' | prepend: site.baseurl }}"></script>
<script src="{{ '/static/js/contact_me.js' | prepend: site.baseurl }}"></script>
<!-- Contact Form JavaScript -->
<script src="{{ '/static/js/jqBootstrapValidation.js' | prepend: site.baseurl }}"></script>
<script src="{{ '/static/js/contact_me.js' | prepend: site.baseurl }}"></script>

<!-- Custom Theme JavaScript -->
<script src="{{ '/static/js/agency.js' | prepend: site.baseurl }}"></script>
<!-- Custom Theme JavaScript -->
<script src="{{ '/static/js/agency.js' | prepend: site.baseurl }}"></script>

<!-- slick -->
<script src="{{ '/static/slick/slick.min.js' | prepend: site.baseurl }}"></script>
115 changes: 76 additions & 39 deletions _includes/testimonials.html
View file
Original file line number Diff line number Diff line change
@@ -1,53 +1,90 @@
<section id="testimonials">
<div id="testimonials-carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#testimonials-carousel" data-slide-to="0" class="active"></li>
<li data-target="#testimonials-carousel" data-slide-to="1"></li>
<li data-target="#testimonials-carousel" data-slide-to="2"></li>
</ol>
<div class="col-md-12">
<h2 class="section-heading text-center">Testimonials</h2>
<h3 class="section-subheading text-muted text-center">For confidentiality, some details are omitted</h3>
</div>

<!-- Slide Wrapper -->
<div class="carousel-inner">
<div class="item active">
<div class="testimonial">
<h4>Testimonial</h4>
<p>This is some testimonial text for this month's CodePen challenge! This is some testimonial text for this month's CodePen challenge!</p>
<div class="source">
<span>Testimonial Source</span>
</div>
<div class="testimonials-carousel">
<div>
<div class="testimonial">
<h4>Testimonial</h4>
<p>This is some testimonial text for this month's CodePen challenge! This is some testimonial text for this month's CodePen challenge!</p>
<div class="source">
<span>Testimonial Source</span>
</div>
</div>
</div>

<div class="item">
<div class="testimonial">
<h4>Testimonial</h4>
<p>This is some testimonial text for this month's CodePen challenge! This is some testimonial text for this month's CodePen challenge!</p>
<div class="source">
<span>Testimonial Source</span>
</div>
<div>
<div class="testimonial">
<h4>Testimonial</h4>
<p>This is some testimonial text for this month's CodePen challenge! This is some testimonial text for this month's CodePen challenge!</p>
<div class="source">
<span>Testimonial Source</span>
</div>
</div>
</div>

<div class="item">
<div class="testimonial">
<h4>Testimonial</h4>
<p>This is some testimonial text for this month's CodePen challenge! This is some testimonial text for this month's CodePen challenge!</p>
<div class="source">
<span>Testimonial Source</span>
</div>
<div>
<div class="testimonial">
<h4>Testimonial</h4>
<p>This is some testimonial text for this month's CodePen challenge! This is some testimonial text for this month's CodePen challenge!</p>
<div class="source">
<span>Testimonial Source</span>
</div>
</div>
</div>

<!-- Left and right controls -->
<a class="left carousel-control" href="#testimonials-carousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#testimonials-carousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
<div>
<div class="testimonial">
<h4>Testimonial</h4>
<p>This is some testimonial text for this month's CodePen challenge! This is some testimonial text for this month's CodePen challenge!</p>
<div class="source">
<span>Testimonial Source</span>
</div>
</div>
</div>
</div>
<div style="text-align:right;margin-right:25px;margin-top:25;">
<span class="prev glyphicon glyphicon-chevron-left"></span>
<span class="next glyphicon glyphicon-chevron-right"></span>
</div>

<script src="{{ '/static/js/jquery-1.11.0.js' | prepend: site.baseurl }}"></script>
<script src="{{ '/static/slick/slick.min.js' | prepend: site.baseurl }}"></script>

<script>
$('.testimonials-carousel').slick({
centerMode: true,
dots:true,
centerPadding: '60px',
slidesToShow: 2,
slidesToScroll: 1,
autoplay:true,
autoplaySpeed:2000,
prevArrow: $('.prev'),
nextArrow: $('.next'),
appendDots:$('.dots'),
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
</script>
</section>
21 changes: 0 additions & 21 deletions static/css/mkp.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,26 +91,5 @@ img.hover-shadow {
height:100%;
min-height: 400px;
padding:100px;
margin-left: 10%;
margin-right: 10%;
text-align: center;
}

/* carousel overrides*/
.carousel {
min-height:400px;

.carousel-indicators {
/* move the indicators to the left. */
bottom:-50px;
text-align: left;

li {
border: 1px solid;
}

li.active {
background-color:#{{ site.data.template.color.primary }};
}
}
}
13 changes: 12 additions & 1 deletion static/js/agency.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,4 +34,15 @@ $('div.modal').on('show.bs.modal', function() {
$(modal).modal('hide');
}
}
});
});

$('.multi-item-carousel .item').each(function(){
var next = $(this).next();
if (!next.length) next = $(this).siblings(':first');
next.children(':first-child').clone().appendTo($(this));
});
$('.multi-item-carousel .item').each(function(){
var prev = $(this).prev();
if (!prev.length) prev = $(this).siblings(':last');
prev.children(':nth-last-child(2)').clone().prependTo($(this));
});
Binary file added static/slick/ajax-loader.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions static/slick/config.rb
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
css_dir = "."
sass_dir = "."
images_dir = "."
fonts_dir = "fonts"
relative_assets = true

output_style = :compact
line_comments = false

preferred_syntax = :scss
Binary file added static/slick/fonts/slick.eot
View file
Binary file not shown.
14 changes: 14 additions & 0 deletions static/slick/fonts/slick.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/slick/fonts/slick.ttf
View file
Binary file not shown.
Binary file added static/slick/fonts/slick.woff
View file
Binary file not shown.
Loading

0 comments on commit bd8414f

Please sign in to comment.