"slick-card"
Bootstrap 4.1.1 Snippet by connectjiyo

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick-theme.css" /> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" /> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <div class="card-deck items"> <div class="card"> <a href="https://www.dmcihomes.com/" target="_blank"><img class="card-img-top" src="https://i.ibb.co/cJfMR5h/DMCI2019.png" alt="Card image cap"></a> <div class="card-body"> <p class="card-text collapse multi-collapse description" id="collapseSummary">DMCI Homes envisioned to be the best provider of residential communities designed to create quality lifestyle responsive to the changing needs and preferences of the market they serve. They are known for delivering modern in-city living, medium density development, resort-living, themed development, quality workmanship, ready for occupancy and move-in policy, and worry-free living.</p> <a class="card-link collapsed" data-toggle="collapse" href=".multi-collapse" aria-expanded="false" aria-controls="collapseSummary"></a> </div> <div class="card-footer metrics"> <div class="number"> <span>1954</span> <span>Established</span> </div> <div class="number"> <span>80</span> <span>Projects</span> </div> </div> </div> <div class="card"> <a href="https://www.arthaland.com.ph/" target="_blank"><img class="card-img-top" src="https://i.ibb.co/sgFNXyx/arthaland.png" alt="Card image cap"></a> <div class="card-body"> <p class="card-text collapse multi-collapse description" id="collapseSummary">Arthaland is the foremost green developer recognized by both local and global organizations for its superior design, high quality, focus on sustainability, and innovation. They pioneer the best-in-class properties that adhere to international and local standards for premium green projects.</p> <a class="collapsed" data-toggle="collapse" href=".multi-collapse" aria-expanded="false" aria-controls="collapseSummary"></a> </div> <div class="card-footer metrics"> <div class="number"> <span>1994</span> <span>Established</span> </div> <div class="number"> <span>5</span> <span>Projects</span> </div> </div> </div> <div class="card"> <a href="https://www.ortigas.com.ph/" target="_blank"><img class="card-img-top" src="https://i.ibb.co/RgPF0SZ/Ortigas-Land.png" alt="Card image cap"></a> <div class="card-body"> <p class="card-text collapse multi-collapse description" id="collapseSummary">Ortiga Land is one of the pioneers in the Philippine real estate landscape. For 88 years, they have been perfecting the art of life, work, and leisure by conceiving of and building master-planned developments that have become thriving communities over time. They have developed commercial and residential projects all over the years. Each of their development is unique and constantly adapts to suit communities’ changing characters.</p> <a class="collapsed" data-toggle="collapse" href=".multi-collapse" aria-expanded="false" aria-controls="collapseSummary"></a> </div> <div class="card-footer metrics"> <div class="number"> <span>1931</span> <span>Established</span> </div> <div class="number"> <span>9</span> <span>Projects</span> </div> </div> </div> <div class="card"> <a href="https://stalucialand.com.ph/" target="_blank"><img class="card-img-top" src="https://i.ibb.co/C2hSQqG/sta-lucia-land-logo.png" alt="Card image cap"></a> <div class="card-body"> <p class="card-text collapse multi-collapse description" id="collapseSummary">Sta. Lucia Land make dreams a reality for more than 40 years as part of the Sta. Lucia Group with over 45 years track record of real estate development. They are the leading Philippine developer of residential communities. Aside from that, they are known for being the best developer of Golf & Country Clubs in the Philippines.</p> <a class="collapsed" data-toggle="collapse" href=".multi-collapse" aria-expanded="false" aria-controls="collapseSummary"></a> </div> <div class="card-footer metrics"> <div class="number"> <span>1995</span> <span>Established</span> </div> <div class="number"> <span>90</span> <span>Projects</span> </div> </div> </div> <div class="card"> <a href="https://www.facebook.com/CDMCgroup/" target="_blank"><img class="card-img-top" src="https://i.ibb.co/2nX2cKq/cdmc.jpg" alt="Card image cap"></a> <div class="card-body"> <p class="card-text collapse multi-collapse description" id="collapseSummary">CDMC is owned, led, mainly run by a team who have several years of combined solid experience in the real estate development industry. CDMC is continuing the legacy of master-planning and developing premier destinations in the country. Mr. Cariño is known for being the trendsetter of unique development like condotel concept and fractional ownership.</p> <a class="collapsed" data-toggle="collapse" href=".multi-collapse" aria-expanded="false" aria-controls="collapseSummary"></a> </div> <div class="card-footer metrics"> <div class="number"> <span>5</span> <span>Projects</span> </div> </div> </div> <div class="card"> <a href="https://smdc.com/" target="_blank"><img class="card-img-top" src="https://i.ibb.co/1G3KdZ7/SMDC.jpg" alt="Card image cap"></a> <div class="card-body"> <p class="card-text collapse multi-collapse description" id="collapseSummary">SMDC commits itself to providing access to luxurious urban living through vertical villages perfectly integrated with a commercial retail environment, giving its residents access to a truly cosmopolitan lifestyle. Their properties are strategically situated in key areas across Metro Manila specifically the Central Business Districts.</p> <a class="collapsed" data-toggle="collapse" href=".multi-collapse" aria-expanded="false" aria-controls="collapseSummary"></a> </div> <div class="card-footer metrics"> <div class="number"> <span>1974</span> <span>Established</span> </div> <div class="number"> <span>48</span> <span>Projects</span> </div> </div> </div> <div class="card"> <a href="https://avidaland.com/" target="_blank"><img class="card-img-top" src="https://i.ibb.co/J5nh4fk/avida-logo-png.png" alt="Card image cap"></a> <div class="card-body"> <p class="card-text collapse multi-collapse description" id="collapseSummary">Avida has been in the real estate development for more than 25 years. They are known for affordable projects/communities and a recognized leader and preferred provider of integrated, master-planned and sustainable communities for families.</p> <a class="collapsed" data-toggle="collapse" href=".multi-collapse" aria-expanded="false" aria-controls="collapseSummary"></a> </div> <div class="card-footer metrics"> <div class="number"> <span>1990</span> <span>Established</span> </div> <div class="number"> <span>95</span> <span>Projects</span> </div> </div> </div> <div class="card"> <a href="https://www.cdcresidences.com/" target="_blank"><img class="card-img-top" src="https://i.ibb.co/BjcS42s/cdc.png" alt="Card image cap"></a> <div class="card-body"> <p class="card-text collapse multi-collapse description" id="collapseSummary">CDC Holdings, Inc. is a group of real estate companies engaged in the development, marketing and management of residential and mixed-use projects catering to the middle-income market. CDC Holdings, Inc. was among the first to introduce the condotel or serviced apartment concept to the local market with its two developments in Makati City – Millennium Suites in 2001 and Millennium Plaza Residences in 1993.</p> <a class="collapsed" data-toggle="collapse" href=".multi-collapse" aria-expanded="false" aria-controls="collapseSummary"></a> </div> <div class="card-footer metrics"> <div class="number"> <span>1989</span> <span>Established</span> </div> <div class="number"> <span>5</span> <span>Projects</span> </div> </div> </div> </div>
html, body { background-color: #039BE5 } .items { width: 80%; margin: 0px auto; margin-top: 100px; } .number { display: flex; flex-direction: column; margin: 0 1em; text-align: center; } .metrics { display: flex; justify-content: space-around; font-size: 0.8em; font-weight: 700; } .description { font-size: 1em; margin: 0 1em 0.5em; line-height: 1.5; min-height: calc(1em*1.5*3); } .collapse:not(.show) { height: calc(1em*1.5*3); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .card-body a.collapsed:after { content: '+ Show More'; } .card-body a:not(.collapsed):after { content: '- Show Less'; } .card-img-top { padding: 2em 2em 1em 2em; height: 140px; } .card { display: flex; width: 100%; background: #fff; } .card-footer { background: #fff; } .slick-list { display: flex!important; } .slick-track { display: flex!important; } .slick-initialized .slick-slide { display: flex!important; }
$(document).ready(function(){ $('.items').slick({ dots: true, infinite: true, speed: 800, autoplay: true, autoplaySpeed: 2000, slidesToShow: 3, slidesToScroll: 3, responsive: [ { breakpoint: 1299, settings: { slidesToShow: 2, slidesToScroll: 2, infinite: true, dots: true } }, { breakpoint: 767, settings: { slidesToShow: 1, slidesToScroll: 1 } } ] }); var maxLength = 200; $(".description").each(function(){ var myStr = $(this).text(); if($.trim(myStr).length < maxLength){ $(this).next().fadeOut(); } }); });

Related: See More


Questions / Comments: