Elementor Blog Post Card Carousel/Slider Layout Design in WordPress

 

 

CSS code snippet for Multicolor Gradient Background (on Left Container):

selector{
    background: linear-gradient(130deg,#ff7a18,#af002d 41%,#319197 76%);
}

 

CSS code snippet on Right Container:

@media (min-width:768px){
selector{
    max-width: calc(100% - 260px);
}    
}

 

[Inside Post Loop] CSS code snippet for Post Title:

selector{
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

 

[Inside Post Loop] CSS code snippet for Post Category:

selector a{
    display: inline-block;
    margin-right: 12px;
    margin-bottom: 2px;
}

 

CSS code snippet on Post Widget:

selector{
    --article: 10;
}
selector{
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
selector > .elementor-widget-container{
    overflow: auto;
}
selector a{
    text-decoration: none;
    -webkit-user-drag: none;
}
selector a:focus{
    outline: none;
}
selector article:first-child{
    margin-left: 0;
}
selector article{
    width: 300px;
    margin-left: -130px;
    transition: all 0.2s ease-in-out;
}
selector article:hover{
    transform: translateY(-1rem) rotate(3deg);
    margin-right: 80px;
}
selector .elementor-grid{
    grid-template-columns: repeat(var(--article),1fr);
}
selector .elementor-widget-container::-webkit-scrollbar {
    height: 0px;
}

 

JavaScript code snippet for Dragging Post:

<script>

function init(){
    
const eles = document.querySelectorAll('.card-post > .elementor-widget-container')

if(eles.length == 0 ) return

eles.forEach((ele) => {

ele.parentElement.style = '--article:' + ele.querySelectorAll('article').length


ele.style.cursor = 'grab'

let pos = { top: 0, left: 0, x: 0, y: 0 }

const mouseDownHandler = function (e) {
    ele.style.cursor = 'grabbing'
    ele.style.userSelect = 'none'

    pos = {
        left: ele.scrollLeft,
        top: ele.scrollTop,
        x: e.clientX,
        y: e.clientY,
    }

    document.addEventListener('mousemove', mouseMoveHandler)
    document.addEventListener('mouseup', mouseUpHandler)
}

const mouseMoveHandler = function (e) {
    const dx = e.clientX - pos.x
    const dy = e.clientY - pos.y

    ele.scrollTop = pos.top - dy
    ele.scrollLeft = pos.left - dx
};

const mouseUpHandler = function () {
    ele.style.cursor = 'grab'
    ele.style.removeProperty('user-select')

    document.removeEventListener('mousemove', mouseMoveHandler)
    document.removeEventListener('mouseup', mouseUpHandler)
}

ele.addEventListener('mousedown', mouseDownHandler)
})

}
init()
document.addEventListener('DOMContentLoaded', init)

</script>

 

CSS code snippet on Right Divider Widget:

selector .elementor-widget-container{
    background: linear-gradient(130deg,#ff7a18,#af002d 41.07%,#319197 76.05%);
}