/* carousel -------------------------------------------------------------------------------------------------------------------------*/
.carousel {
position: relative;
z-index: 900; /* Keeps carousel below header and sidebar */
}
.content {
margin-left: 260px; /* Content will not overlap the sidebar */
padding: 20px;
}
.des{
width: 80%;
}
.carousel{
height: 100vh;
margin-top: -140px;
width: 100vw;
overflow: hidden;
position: relative;
/* Prevents horizontal scrolling */
/* Allows vertical scrolling */
width: 100%;
}
.carousel .list .item{
width: 100%;
height: 100%;
position: absolute;
inset: 0 0 0 0;
}
.carousel .list .item img{
width: 100%;
height: 100%;
object-fit: cover;
}
.carousel .list .item .content{
position: absolute;
top: 30%;
width: 100%;
max-width: 80%;
left: 30%;
transform: translateX(-50%);
padding-right: 30%;
box-sizing: border-box;
color: #fff;
text-shadow: 0 5px 10px #0004;
}
.carousel .list .item .author{
font-weight: bold;
letter-spacing: 10px;
}
.carousel .list .item .title,
.carousel .list .item .topic{
font-size: 4em;
font-weight: bold;
line-height: 1.3em;
}
.carousel .list .item .topic{
color: rgba(249, 154, 20, 0.954) ;
}
.carousel .list .item .buttons{
display: grid;
grid-template-columns: repeat(2, 130px);
grid-template-rows: 40px;
gap: 5px;
margin-top: 20px;
}
.carousel .list .item .buttons button{
border: none;
background-color: #eee;
letter-spacing: 3px;
font-family: Poppins;
font-weight: 500;
}
.carousel .list .item .buttons button:nth-child(2){
background-color: transparent;
border: 1px solid #fff;
color: #eee;
}
/* thumbail */
.thumbnail{
position: absolute;
bottom: 50px;
left: 50%;
width: max-content;
z-index: 100;
display: flex;
gap: 20px;
}
.thumbnail .item{
width: 150px;
height: 220px;
flex-shrink: 0;
position: relative;
}
.thumbnail .item img{
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 20px;
display: block;
}
.overlay-text {
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%, -50%);
color: whitesmoke;
background: rgba(0, 0, 0, 0.6);
font-size: 18px;
font-weight: bold;
text-align:center;
width: 100%;
padding: 10px 0px 10px 0px;
}
.thumbnail .item .content{
color: #fff;
position: absolute;
bottom: 10px;
left: 10px;
right: 10px;
}
.thumbnail .item .content .title{
font-weight: 500;
}
.thumbnail .item .content .description{
font-weight: 300;
}
/* arrows */
.arrows{
position: absolute;
top: 80%;
right: 62%;
z-index: 100;
width: 300px;
max-width: 30%;
display: flex;
gap: 15px;
align-items: center;
}
.arrows button{
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #eee4;
border: none;
color: #fff;
font-family: monospace;
font-weight: bold;
transition: .5s;
}
.arrows button:hover{
background-color: #fff;
color: #000;
}
/* animation */
.carousel .list .item:nth-child(1){
z-index: 1;
}
/* animation text in first item */
.carousel .list .item:nth-child(1) .content .author,
.carousel .list .item:nth-child(1) .content .title,
.carousel .list .item:nth-child(1) .content .topic,
.carousel .list .item:nth-child(1) .content .des,
.carousel .list .item:nth-child(1) .content .buttons
{
transform: translateY(50px);
filter: blur(20px);
opacity: 0;
animation: showContent .5s 1s linear 1 forwards;
}
@keyframes showContent{
to{
transform: translateY(0px);
filter: blur(0px);
opacity: 1;
}
}
.carousel .list .item:nth-child(1) .content .title{
animation-delay: 1.2s!important;
}
.carousel .list .item:nth-child(1) .content .topic{
animation-delay: 1.4s!important;
}
.carousel .list .item:nth-child(1) .content .des{
animation-delay: 1.6s!important;
}
.carousel .list .item:nth-child(1) .content .buttons{
animation-delay: 1.8s!important;
}
/* create animation when next click */
.carousel.next .list .item:nth-child(1) img{
width: 150px;
height: 220px;
position: absolute;
bottom: 50px;
left: 50%;
border-radius: 30px;
animation: showImage .5s linear 1 forwards;
}
@keyframes showImage{
to{
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 0;
}
}
.carousel.next .thumbnail .item:nth-last-child(1){
overflow: hidden;
animation: showThumbnail .5s linear 1 forwards;
}
.carousel.prev .list .item img{
z-index: 100;
}
@keyframes showThumbnail{
from{
width: 0;
opacity: 0;
}
}
.carousel.next .thumbnail{
animation: effectNext .5s linear 1 forwards;
}
@keyframes effectNext{
from{
transform: translateX(150px);
}
}
/* running time */
.carousel .time{
position: absolute;
z-index: 1000;
width: 0%;
height: 3px;
background-color: #f1683a;
left: 0;
top: 0;
}
.carousel.next .time,
.carousel.prev .time{
animation: runningTime 3s linear 1 forwards;
}
@keyframes runningTime{
from{ width: 100%}
to{width: 0}
}
/* prev click */
.carousel.prev .list .item:nth-child(2){
z-index: 2;
}
.carousel.prev .list .item:nth-child(2) img{
animation: outFrame 0.5s linear 1 forwards;
position: absolute;
bottom: 0;
left: 0;
}
@keyframes outFrame{
to{
width: 150px;
height: 220px;
bottom: 50px;
left: 50%;
border-radius: 20px;
}
}
.carousel.prev .thumbnail .item:nth-child(1){
overflow: hidden;
opacity: 0;
animation: showThumbnail .5s linear 1 forwards;
}
.carousel.next .arrows button,
.carousel.prev .arrows button{
pointer-events: none;
}
.carousel.prev .list .item:nth-child(2) .content .author,
.carousel.prev .list .item:nth-child(2) .content .title,
.carousel.prev .list .item:nth-child(2) .content .topic,
.carousel.prev .list .item:nth-child(2) .content .des,
.carousel.prev .list .item:nth-child(2) .content .buttons
{
animation: contentOut 1.5s linear 1 forwards!important;
}
@keyframes contentOut{
to{
transform: translateY(-150px);
filter: blur(20px);
opacity: 0;
}
}
/* Base styles (keeping your original structure) */
.carousel .list .item .content {
position: absolute;
top: 30%;
width: 100%;
max-width: 80%;
left: 30%;
transform: translateX(-50%);
padding-right: 30%;
box-sizing: border-box;
color: #fff;
text-shadow: 0 5px 10px #0004;
}
.carousel .list .item .title,
.carousel .list .item .topic {
font-size: 4em;
font-weight: bold;
line-height: 1.3em;
}
.carousel .list .item .topic {
color: rgba(249, 154, 20, 0.954);
}
/* Laptop View (1024px and above) */
@media screen and (min-width: 1024px) {
.carousel .list .item .content {
top: 30%;
max-width: 80%;
left: 30%;
padding-right: 30%;
}
.carousel .list .item .title,
.carousel .list .item .topic {
font-size: 4em;
width: auto;
text-align: left;
}
}
/* Tablet View (768px - 1023px) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
.carousel .list .item .content {
top: 25%;
left: 50%;
transform: translateX(-50%);
padding-right: 0;
max-width: 90%;
text-align: center;
}
.carousel .list .item .title {
font-size: 2.5em;
line-height: 1.2em;
width: 100%;
max-width: 600px;
margin: 0 auto 10px;
}
.carousel .list .item .topic {
font-size: 2em;
line-height: 1.2em;
width: 100%;
max-width: 600px;
margin: 0 auto 15px;
}
.des {
font-size: 1em;
width: 90%;
max-width: 700px;
margin: 0 auto;
}
}
/* Mobile View (below 768px) */
@media screen and (max-width: 767px) {
.carousel .list .item .content {
top: 20%;
left: 50%;
transform: translateX(-50%);
padding: 15px;
max-width: 95%;
text-align: center;
}
.carousel .list .item .title {
font-size: 1.8em;
line-height: 1.2em;
width: 100%;
max-width: 400px;
margin: 0 auto 10px;
}
.carousel .list .item .topic {
font-size: 1.5em;
line-height: 1.2em;
width: 100%;
max-width: 400px;
margin: 0 auto 15px;
}
.des {
font-size: 0.9em;
width: 90%;
max-width: 500px;
margin: 0 auto;
}
}
/* Small Mobile View (below 475px) */
@media screen and (max-width: 475px) {
.carousel .list .item .content {
top: 15%;
padding: 10px;
max-width: 100%;
margin: -50px 50px;
}
.carousel .list .item .title {
font-size: 1.5em;
line-height: 1.1em;
width: 90%;
max-width: 300px;
margin: 0 auto 8px;
}
.carousel .list .item .topic {
font-size: 1.2em;
line-height: 1.1em;
width: 90%;
max-width: 300px;
margin: 0 auto 12px;
}
.des {
font-size: 0.8em;
width: 95%;
max-width: 350px;
}
}
Cutting
Machine
MaxxCAM revolutionizes sheet metal CAD/CAM, optimizing laser, plasma, and water-jet cutting machines with its advanced Cut Module. Tailored for profile-cutting machines, it excels with support for punch-laser hybrids. Automatic lead-in and escape geometry assignment based on part size and material thickness ensures optimal cut conditions.
CONTACT US
Laser
Cutting
MaxxCAM revolutionizes sheet metal CAD/CAM, optimizing laser, plasma, and water-jet cutting machines with its advanced Cut Module. Tailored for profile-cutting machines, it excels with support for punch-laser hybrids. Automatic lead-in and escape geometry assignment based on part size and material thickness ensures optimal cut conditions.
CONTACT US
Cutting
Tube
MaxxCAM revolutionizes sheet metal CAD/CAM, optimizing laser, plasma, and water-jet cutting machines with its advanced Cut Module. Tailored for profile-cutting machines, it excels with support for punch-laser hybrids. Automatic lead-in and escape geometry assignment based on part size and material thickness ensures optimal cut conditions.
CONTACT US
CNC
Lathe
MaxxCAM revolutionizes sheet metal CAD/CAM, optimizing laser, plasma, and water-jet cutting machines with its advanced Cut Module. Tailored for profile-cutting machines, it excels with support for punch-laser hybrids. Automatic lead-in and escape geometry assignment based on part size and material thickness ensures optimal cut conditions.
CONTACT US
Cutting Machine
Laser Cutting
Cutting Tube
CNC Lathe
<
>
//step 1: get DOM
let nextDom = document.getElementById('next');
let prevDom = document.getElementById('prev');
let carouselDom = document.querySelector('.carousel');
let SliderDom = carouselDom.querySelector('.carousel .list');
let thumbnailBorderDom = document.querySelector('.carousel .thumbnail');
let thumbnailItemsDom = thumbnailBorderDom.querySelectorAll('.item');
let timeDom = document.querySelector('.carousel .time');
thumbnailBorderDom.appendChild(thumbnailItemsDom[0]);
let timeRunning = 3000;
let timeAutoNext = 7000;
nextDom.onclick = function(){
showSlider('next');
}
prevDom.onclick = function(){
showSlider('prev');
}
let runTimeOut;
let runNextAuto = setTimeout(() => {
next.click();
}, timeAutoNext)
function showSlider(type){
let SliderItemsDom = SliderDom.querySelectorAll('.carousel .list .item');
let thumbnailItemsDom = document.querySelectorAll('.carousel .thumbnail .item');
if(type === 'next'){
SliderDom.appendChild(SliderItemsDom[0]);
thumbnailBorderDom.appendChild(thumbnailItemsDom[0]);
carouselDom.classList.add('next');
}else{
SliderDom.prepend(SliderItemsDom[SliderItemsDom.length - 1]);
thumbnailBorderDom.prepend(thumbnailItemsDom[thumbnailItemsDom.length - 1]);
carouselDom.classList.add('prev');
}
clearTimeout(runTimeOut);
runTimeOut = setTimeout(() => {
carouselDom.classList.remove('next');
carouselDom.classList.remove('prev');
}, timeRunning);
clearTimeout(runNextAuto);
runNextAuto = setTimeout(() => {
next.click();
}, timeAutoNext)
}
MaxxCAM: Laser | Punching | Nesting Software
MaxxCAM revolutionizes sheet metal CAD/CAM, optimizing laser, plasma, and water-jet cutting machines with its advanced Cut Module. Tailored for profile-cutting machines, it excels with support for punch-laser hybrids. Automatic lead-in and escape geometry assignment based on part size and material thickness ensures optimal cut conditions.
Why Choose Us ?
Our Products
PROFILE CAM
Maximise the potential of laser, plasma, oxy-fuel, and water-jet cutting machines with MaxxCAM’s cutting module.
PUNCH CAM
The MaxxCAM tooling engine provides the best automated and interactive capabilities available in the industry.
2D CAD
The MaxxCAM 2D CAD system uses a 2D parametric constraint kernel in 2D CAD and for advanced part of the creation.
AUTO NESTING
MaxxCAM’ s irregular nesting engine allows nesting on multiple sheets and sizes simultaneously, resulting in stunning results
PUNCH/SHEAR CAM
The MaxxCAM tooling engine provides the best automated and interactive capabilities available in the industry.
COMPOSITE CUTTING
Composite cutting and knife cutting are advanced techniques used to achieve precise, smooth, and efficient results in sheet metal fabrication.
Our Manufacturing Process
Custom Stories
See for yourself why many companies have chosen MaxxCAM
Get In Touch
Stay in touch
Updates for app
Follow us:
Call us: 00 34 938 60 24
Mail – info@maxxcam.com