{"title":"Newer Carousel Demo","description":"\u003cbody\u003e\n  \u003clink href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-EVSTQN3\/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC\" crossorigin=\"anonymous\"\u003e\n\u003cscript src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/js\/bootstrap.bundle.min.js\" integrity=\"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn\/tWtIaxVXM\" crossorigin=\"anonymous\"\u003e\u003c\/script\u003e\n\u003cstyle\u003e\n.carousel-inner{\n\twidth:100%;\n\taspect-ratio:1.1;\n}\n.carouselImage{\n\tobject-fit:contain;\n\twidth:82%;\n}\n.carousel-control-next{\n\twidth:9%;\n}\n.carousel-control-prev{\n\twidth:9%;\n}\n.carousel-control-prev-icon{\n\tfilter:brightness(0);\n}\n.carousel-control-next-icon{\n\tfilter:brightness(0);\n}\nhr{\n\tmargin:10px;\n}\n#switch{\n\tfloat:right;\n\tmargin-right:20px;\n\tfont-size:0px;\n}\n#vertical{\n\theight:40px;\n\twidth:2px;\n\tbackground-color:RGB(150,150,150);\n\tdisplay:inline-block;\n}\n.switchOption{\n\tvertical-align:top;\n\tbackground-color:RGB(240,240,240)\n}\n#switchOne{\n\tborder-radius: 3px 0px 0px 3px;\n}\n#switchTwo{\n\tborder-radius: 0px 3px 3px 0px;\n}\n.switchChoice{\n\tbackground-color:RGB(70, 125, 240)\n}\n.carousel-indicators [data-bs-target]{\n\tbackground-color:RGB(40,40,40);\n}\ndiv.col-sm:nth-of-type(1){ padding-left:0px;}\ndiv.col-sm:nth-of-type(2){ padding-right:0px;}\n\u003c\/style\u003e\n\u003cscript\u003e\nvar selected=0;\nfunction flop(){\n\tselected=(selected+1)%2\n\tdocument.getElementById(\"switch\").getElementsByTagName(\"img\")[selected].classList.add(\"switchChoice\")\n\tdocument.getElementById(\"switch\").getElementsByTagName(\"img\")[(selected+1)%2].classList.remove(\"switchChoice\")\n\tdocument.getElementsByClassName(\"bulleted\")[selected].style.display=\"block\"\n\tdocument.getElementsByClassName(\"bulleted\")[(selected+1)%2].style.display=\"none\"\n}\n\u003c\/script\u003e\n\u003cdiv class=\"container-fluid\"\u003e\n\u003cdiv class=\"row\"\u003e\n\t\u003cdiv class=\"col-sm\"\u003e\n\t\t\u003cdiv id=\"showcase\" class=\"carousel slide\" data-ride=\"carousel\" align=\"center\"\u003e\n\t\t  \u003cdiv class=\"carousel-indicators\"\u003e\n\t\t\t\u003cbutton data-bs-target=\"#showcase\" data-bs-slide-to=\"0\" class=\"active\"\u003e\u003c\/button\u003e\n\t\t\t\u003cbutton data-bs-target=\"#showcase\" data-bs-slide-to=\"1\"\u003e\u003c\/button\u003e\n\t\t  \u003c\/div\u003e\n\t\t  \u003cdiv class=\"carousel-inner\"\u003e\n\t\t\t\u003cdiv class=\"carousel-item active\"\u003e\n\t\t\t  \u003cimg class=\"carouselImage\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0548\/8351\/6595\/files\/ggg.png\" title=\"The logo\" alt=\"The logo\"\u003e\n\t\t\t\u003c\/div\u003e\n\t\t\t\u003cdiv class=\"carousel-item\"\u003e\n\t\t\t  \u003cimg class=\"carouselImage\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0548\/8351\/6595\/files\/Concrete_Blanket.jpg\" title=\"A concrete blanket\" alt=\"A concrete blanket\"\u003e\n\t\t\t\u003c\/div\u003e\n\t\t  \u003c\/div\u003e\n\t\t  \u003cbutton class=\"carousel-control-prev\" type=\"button\" data-bs-target=\"#showcase\" data-bs-slide=\"prev\"\u003e\n\t\t\t\u003cspan class=\"carousel-control-prev-icon\"\u003e\u003c\/span\u003e\n\t\t  \u003c\/button\u003e\n\t\t  \u003cbutton class=\"carousel-control-next\" type=\"button\" data-bs-target=\"#showcase\" data-bs-slide=\"next\"\u003e\n\t\t\t\u003cspan class=\"carousel-control-next-icon\"\u003e\u003c\/span\u003e\n\t\t  \u003c\/button\u003e\n\t\t\u003c\/div\u003e\t\n  \u003c\/div\u003e\n\t\u003cdiv class=\"col-sm\"\u003e\n\t\t\u003ch3\u003eAbout\u003c\/h3\u003e\n\t\t\u003cp\u003eThis is the demo of the new carousel design, which was made to emphasize the controls, make the image more visible, and make the image match its original dimensions.\u003c\/p\u003e\n\t\t\u003chr\u003e\n\t\t\u003cdiv id=\"switch\" onclick=\"flop()\" onkeypress=\"flop()\" tabindex=\"0\"\u003e\n\t\t\t\u003cimg id=\"switchOne\" class=\"switchOption switchChoice\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0548\/8351\/6595\/files\/Lines.png\" alt=\"Switch to product description\"\u003e\n\t\t\t\u003cdiv id=\"vertical\"\u003e\u003c\/div\u003e\n\t\t\t\u003cimg id=\"switchTwo\" class=\"switchOption\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0548\/8351\/6595\/files\/Page.png\" alt=\"Switch to product literature\"\u003e\n\t\t\u003c\/div\u003e\n\t\t\u003cdiv class=\"bulleted\"\u003e\n\t\t\t\u003ch3\u003eDescription\u003c\/h3\u003e\n\t\t\t\u003cul\u003e\n\t\t\t\t\u003cli\u003eLess image strechting.\u003c\/li\u003e\n\t\t\t\t\u003cli\u003eMore visible controls.\u003c\/li\u003e              \n\t\t\t\u003c\/ul\u003e\n\t\t\u003c\/div\u003e\n\t\t\u003cdiv class=\"bulleted\" style=\"display:none\"\u003e\n\t\t\t\u003ch3\u003eProduct Literature\u003c\/h3\u003e\n\t\t\t\u003cul\u003e\n\t\t\t\t\u003cli\u003e\u003ca target=\"#\" href=\"\"\u003e Important link\u003c\/a\u003e\u003c\/li\u003e\n\t\t\t\u003c\/ul\u003e\t\t\n\t\t\u003c\/div\u003e\t\t\n\t\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\n\u003c\/body\u003e","products":[],"url":"https:\/\/forshor.com\/collections\/newer-carousel-demo.oembed","provider":"For-Shor","version":"1.0","type":"link"}